jQuery `.is(":visible")` 在 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.

换句话说，元素必须具有非零的宽度和高度才能占用空间并可见.

In other words, an element must have a non-zero width and height to consume space and be visible.

具有 visibility: hidden 或 opacity: 0 的元素被认为是可见的，因为它们仍然占用布局中的空间.

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

另一方面，即使它的 visibility 设置为 hidden 或不透明度为零，它仍然是 :visible jQuery 作为它占用空间，当 CSS 明确表示其可见性是隐藏的时，这可能会令人困惑.

On the other hand, even if its 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 its visibility is hidden.

不在文档中的元素被认为是隐藏的；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.

查看它的简单方法是，如果您可以在屏幕上看到元素，即使您看不到它的内容，它是透明的等等，它是可见的，即它占用空间.

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

我稍微清理了您的标记并添加了显示样式(即将元素显示设置为块"等)，这对我有用:

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:

小提琴

:visible

从 jQuery 3 开始，:visible 的定义略有变化

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

jQuery 3 稍微修改了 :visible 的含义(因此:隐藏).
从这个版本开始，元素将被考虑: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(":visible")` 在 Chrome 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！