jQuery is(':visible')表现得很奇怪。

Question

我在使用jQuery测试对象的可见性时遇到了一个奇怪的问题。

我有这个测试JS。

alert($myObject.css('display'));
alert($myObject.is(':visible'));

第一个警报显示 "block"，这是有意义的，因为firebug清楚地显示，它被设置为显示：block，你可以在浏览器中看到页面上的对象。

但第二个警报显示'false'。这对我来说一点意义都没有。

我是否误解了is(':visible')的使用？

Answer 1

考虑一下这个HTML。

<div id="div1" style="display: none;">
    <div id="div2">
        <p>Some div content</p>
    </div>
</div>

和这个JavaScript。

$myObject = jQuery('#div2');
alert($myObject.css('display')); // 'block'
alert($myObject.is(':visible')); // false

有多个原因 $myObject 可能不可见，即使它有 display: none 风格集。见 :可见选择器文档 以了解详情。

现在有意义吗？

Answer 2

该 :visible 选择器不等同于 display css属性。

从链接的文档来看，可见是 false 当。

• 它们的CSS显示值为none。
• 它们是type="hidden "的表单元素，它们的宽度和高度被明确设置为0。
• 它们的宽度和高度被明确设置为0。
• 祖先元素是隐藏的，所以该元素不会显示在页面上。

Answer 3

从 :可见选择器 文件。

元素可以被认为是隐藏的，有几个原因。

• 它们的CSS显示值为none。
• 它们是type="hidden "的表单元素，它们的宽度和高度被明确设置为0。
• 它们的宽度和高度被明确设置为0。
• 祖先元素是隐藏的，所以该元素不显示在页面上。

检查其他这些条件是否都不为真。

Answer 4

那么，答案就出来了。

如果别人在你的对象上附加了一个CLICK事件 而你之前并不知道，这个事件可能会破坏你想使用的任何逻辑;)

唉，这就是这里发生的事情。另一个点击事件被附加到这个对象上，这个对象被设置为隐藏其父对象。在我的逻辑检查它是否可见之前，它先被触发了。

最后：用户错误。

当这是一个用户错误的问题时，应该有某种形式的信誉惩罚。 ;)

Answer 5

我也有同样的问题。我解决了这个问题，检查了 .height() 在toggle调用之后。像这样。

// detect jQuery toggle state
if ($('#toggled_element').height() > 0) {
    // do this, it's visible
}
else {
    // do this, it's not visible
}