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/
如果一个项是隐藏项的子项，is(":visible")将返回true，这是不正确的。
我只是通过添加“display:inherit”到子项来修复这个问题。这将为我解决这个问题:
<div class="parent">
<div class="child">
</div>
<div>
和CSS:
.parent{
display: hidden;
}
.child{
display: inherit;
}
现在可以通过改变父元素的可见性来有效地打开和关闭项目，$(element).is(":visible")将返回父元素的可见性
我不知道为什么你的代码不能在chrome上工作，但我建议你使用一些变通办法:
$el.is(':visible') === $el.is(':not(:hidden)');
or
$el.is(':visible') === !$el.is(':hidden');
如果你确定jQuery在chrome中会给你一些不好的结果，你可以依靠css规则检查:
if($el.css('display') !== 'none') {
// i'm visible
}
另外，您可能希望使用最新的jQuery，因为它可能修复了旧版本的bug。
一个跨浏览器/版本的解决方案来确定一个元素是否可见，是添加/删除一个css类的元素显示/隐藏。元素的默认(可见)状态可以是这样的:
<span id=“span1” class=“visible”>span text</span>
然后在hide上删除类:
$ (" # span1”).removeClass(“可见”)hide ();
在节目中，再次添加:
$ (" # span1”).addClass(“可见的”),告诉();
然后，使用下面的命令来确定元素是否可见:
如果($ (" # span1 ") .hasClass(“可见”)){/ /做某事}
这也解决了在大量使用":visible"选择器时可能出现的性能影响，jQuery文档中指出了这一点:
大量使用此选择器可能会影响性能，因为它可能迫使浏览器在确定可见性之前重新呈现页面。通过其他方法跟踪元素的可见性，例如使用类，可以提供更好的性能。
jQuery官方API文档:visible选择器
如果一个项是隐藏项的子项，is(":visible")将返回true，这是不正确的。
我只是通过添加“display:inherit”到子项来修复这个问题。这将为我解决这个问题:
<div class="parent">
<div class="child">
</div>
<div>
和CSS:
.parent{
display: hidden;
}
.child{
display: inherit;
}
现在可以通过改变父元素的可见性来有效地打开和关闭项目，$(element).is(":visible")将返回父元素的可见性
有一种奇怪的情况，如果元素被设置为显示:内联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();
});
