jQuery`.is（"可见"）"不适用于Chrome [英] jQuery `.is(":visible")` not working in Chrome

问题描述

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

上述代码在Firefox中运行流畅，但在Chrome中似乎不起作用。在Chrome中，它显示 .is（：visible）= false ，即使它是 true 。

The above code runs smooth in Firefox, but doesn't seem to work in Chrome. In Chrome it shows .is(":visible") = false even when it is true.

我正在使用以下jQuery版本：jquery-1.4.3.min.js

I am using following jQuery version: jquery-1.4.3.min.js

jsFiddle链接： http://jsfiddle.net/WJU2r/4/

jsFiddle Link: http://jsfiddle.net/WJU2r/4/

推荐答案

看来jQuery的：visible 选择器不适用于Chrome中的某些内联元素。

解决方案是添加一个显示样式，例如block或inline-block以使其工作。

It seems jQuery's :visible selector does not work for some inline elements in Chrome.
The solution is to add a display style, like "block" or "inline-block" to make it work.

另外请注意，jQuery对许多开发人员可见的定义有些不同

Also note that jQuery has a somewhat different definition of what is visible than many developers

如果文档占用文档中的空间，则元素被视为可见。

可见元素的宽度或高度大于零。

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.

具有可见性：隐藏或不透明度：0 的元素被视为visibl e，
，因为它们仍然占用布局空间。

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

不在文档中的元素被视为隐藏; jQuery确实
没有办法知道它们在附加到
文档后是否可见，因为它取决于适用的样式。

Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

全部选项元素被视为隐藏，无论其
选择状态如何。

All option elements are considered hidden, regardless of their selected state.

在隐藏元素的动画期间，元素被视为
，直到结束的动画。在动画中显示
元素时，该元素在
动画开始时被视为可见。

During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

换句话说，元素 消耗空间 是可见的，这意味着元素必须具有宽度和高度才能消耗空间并且可见。

另一方面，即使它的 visibility 被设置为隐藏或者不透明度为零，它仍然是：visible 转换为jQuery，因为它占用了空间，当CSS明确说明它的可见性被隐藏时，这可能会令人困惑。

In other words, elements that consume space are visible, which means the element must have a width and a height to consume space and be visible.
On the other hand, even if it's visibility is set to hidden or the opacity is zero, it's still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says it's visibility is hidden.

看看它的方法是，如果你能看到屏幕上的元素，即使你看不到它的内容，它是透明的，它是可见的，即它占用了空间。

The easy way to look at it, is that if you can see the element on the screen, even if you can't see it's content, it's transparent etc., it's visible, i.e. it takes up space.

我稍微清理了一下标记并添加了显示样式（即将元素显示设置为block等），这适用于我：

I cleaned up your markup a little and added a display style (i.e. setting the elements display to "block" etc), and this works for me:

FIDDLE

的官方API参考：visible

从jQuery 3开始，：visible 的定义稍有变化

As of jQuery 3, the definition of :visible has changed slightly

jQuery 3稍微修改了：visible 的含义（因此也是
：hidden ）。

从这个版本开始，元素将被视为
：visible 任何布局框，包括零宽度
和/或高度的布局框。例如， br 元素和没有
内容的内联元素将由：visible 选择器选择。

jQuery 3 slightly modifies the meaning of :visible (and therefore of :hidden).
Starting with this version, elements will be considered :visible if they have any layout boxes, including those of zero width and/or height. For example, br elements and inline elements with no content will be selected by the :visible selector.

这篇关于jQuery`.is（"可见"）"不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！