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检查可见性失败。
例子:
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"