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> - <span id=othermakecancel class=txtbutton>Cancel</span></span>
上面的代码在Firefox中运行流畅，但在Chrome中似乎行不通。在Chrome中，它显示.is(":visible") = false，即使它是真的。
我使用以下jQuery版本:jQuery -1.4.3.min.js
jsfiddle.net/wju2r/4/
这是来自jquery.js的一段代码，当is(":visible")被调用时执行:
if (jQuery.expr && jQuery.expr.filters){
jQuery.expr.filters.hidden = function( elem ) {
return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
}
如您所见，它使用的不仅仅是CSS display属性。它还取决于元素内容的宽度和高度。因此，要确保元素有一定的宽度和高度。为此，你可能需要将display属性设置为"inline-block"或"block"
有一种奇怪的情况，如果元素被设置为显示:内联jQuery检查可见性失败。
例子:
CSS
#myspan {display: inline;}
jQuery
$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false
要解决这个问题，你可以在jQuery中隐藏元素，然后show/hide或toggle()应该可以正常工作。
$('#myspan').hide()
$('#otherElement').on('click', function() {
$('#myspan').toggle();
});
这是来自jquery.js的一段代码，当is(":visible")被调用时执行:
if (jQuery.expr && jQuery.expr.filters){
jQuery.expr.filters.hidden = function( elem ) {
return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
}
如您所见，它使用的不仅仅是CSS display属性。它还取决于元素内容的宽度和高度。因此，要确保元素有一定的宽度和高度。为此，你可能需要将display属性设置为"inline-block"或"block"
jQuery的:visible选择器似乎不适用于Chrome中的一些内联元素。解决方案是添加一个显示样式，比如“block”或“inline-block”来让它工作。
另外请注意，jQuery对可见内容的定义与许多开发人员有所不同:
如果元素占用文档中的空间，则认为它们是可见的。
可见元素的宽度或高度大于零。
换句话说，一个元素必须具有非零的宽度和高度才能占用空间并可见。
能见度:hidden或不透明度:0的元素被认为是可见的，
因为它们仍然占用布局中的空间。
另一方面，即使它的可见性被设置为隐藏或不透明度为零，它仍然对jQuery可见，因为它消耗空间，当CSS显式地表示其可见性为隐藏时，这可能会令人困惑。
不在文档中的元素被认为是隐藏的;jQuery是
类时，无法知道它们是否可见
文档，因为它取决于适用的样式。
所有选项元素都被认为是隐藏的，不管它们是什么
选中状态。
在动画中隐藏元素时，会考虑该元素
直到动画结束都可见。在动画中显示
元素时，该元素被认为在开始处可见
动画。
看它最简单的方法是，如果你能在屏幕上看到元素，即使你看不到它的内容，它也是透明的，它是可见的，也就是说它占据了空间。
我稍微清理了一下你的标记，并添加了一个显示风格(即设置元素显示为“块”等)，这对我来说是有效的:
小提琴
官方API参考:可见
从jQuery 3开始，:visible的定义发生了轻微的变化
jQuery 3稍微修改了的含义:可见的(因此是的)
:隐藏)。
从这个版本开始，将考虑元素
:如果它们有任何布局框，包括那些零宽度的布局框，则可见
和/或高度。例如，br元素和带有no .
内容将由:visible选择器选择。
如果一个项是隐藏项的子项，is(":visible")将返回true，这是不正确的。
我只是通过添加“display:inherit”到子项来修复这个问题。这将为我解决这个问题:
<div class="parent">
<div class="child">
</div>
<div>
和CSS:
.parent{
display: hidden;
}
.child{
display: inherit;
}
现在可以通过改变父元素的可见性来有效地打开和关闭项目，$(element).is(":visible")将返回父元素的可见性
