Показать div, если он еще не виден

Question

У меня есть код, который добавляет текст в div, а затем показывает его.

$("#messageBox").addClass('msg-error').text("Your selected date is no longer available due to the appointment duration. Please select an alternative date.").show(); 

У меня тогда есть другой код, который также добавляет текст к тому же div и показывает его.

$("#messageBox").addClass('msg-error').text("Your selected time is no longer available due to the appointment duration. Please select an alternative time.").show(); 

Однако я хочу, чтобы нижнее сообщение отображалось, если divBox не видно. Мой код для этого.

if($("#messageBox").not(':visible') || $("#messageBox").css("visibility") == "hidden"){ 
    $("#messageBox").addClass('msg-error').text("Your selected time is no longer available due to the appointment duration. Please select an alternative time.").show(); 
} 

Это не всегда работает, я что-то не так?

Благодаря

Answer 1

Попробуйте это вместо:

if($("#messageBox").is(':hidden')){ 
    // your existing code 
} 

Или Поочередно

if($("#messageBox").is(':visible') === false){ 
    // your existing code 
} 

Надежда это будет исправить вашу проблему.

Answer 2

Если это единственный способ переключить видимость, то самым простым вариантом является просто проверить, есть ли у div #messageBox класс msg-error.

if(!$('#messageBox').hasClass("msg-error")) { 
    $("#messageBox").addClass('msg-error').text("Your selected time is no longer available due to the appointment duration. Please select an alternative time.").show(); 
}