jquery - 如何检查元素 visibility=hidden 是否为 true jQuery

Question

假设我有 2 个元素，div1 和 div2。当我点击 div1 时，div2 应该在 visibility=hidden 和 visibility=visible 之间 .toggleClass()。这很好用。但是当我尝试这个时:

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

什么都没有发生。如果我将 'hidden' 更改为 'visible' 它就可以正常工作。但这不是我想要的。我知道当使用 visibility=hidden 时，元素仍然被认为是可见的，但不应该 .css('visibility') == 'hidden' 检查元素的样式是否已设置可见性=隐藏？就我而言，这应该是正确的。

我也试过

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

但是没有任何反应。

问题可能是当 DOM 加载时 visHidden 和 visVisible 类都没有设置？因为我只在单击元素时使用 jQuery 设置它们。如果是这样的话，有办法解决吗？而且我不能使用显示属性。

Answer 1

您应该尝试 jquery 的 .is() 方法来检查可见性。

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

在你的情况下，

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