Как проверить, истинна ли видимость элемента = скрыта jQuery

Question

Предположим, у меня есть 2 элемента, div1 и div2. И когда я нажимаю на div1, div2 должен .toggleClass() между visibility=hidden и visibility=visible. Это прекрасно работает. Но когда я пробую это:

if($('#div2').css('visibility') == 'hidden') { 
$('#div1').replaceWith('<span> Duh </span>'); 
} 

Ничего не происходит. Если я изменю 'hidden' на 'visible', он работает нормально. Но этого я не хочу. Я знаю, что когда visibility = hidden используется, элемент все еще считается видимым, но shoulnd't .css('visibility') == 'hidden' проверить, установлен ли стиль элемента для видимости = скрытый? Что в моем случае должно быть правдой.

Я также попытался

if($('#div2').hasClass('visHidden')) { 
$('#div1').replaceWith('<span> Duh </span>'); 
} 

Но ничего не происходит.

Может ли проблема заключаться в том, что при загрузке DOM ни один из классов visHidden и visVisible не установлен? Потому что я только устанавливаю их с помощью jQuery, если элемент щелкнут. Если это так, то можно ли обойти это? И я не могу использовать свойство отображения.

Answer 1

вы должны попробовать .is() метод jquery для проверки видимости.

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

в вашем случае,

if(!$('#div2').is(":visible")) { 
    $('#div1').replaceWith('<span> Duh </span>'); 
} 

Answer 2

это Ваш ответ

if($('#div2').is(':visible')) {....}