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,即使它是真的。

我使用以下jQuery版本:jQuery -1.4.3.min.js

jsfiddle.net/wju2r/4/


当前回答

如果你读过jquery文档,你会发现有很多不可见/隐藏的原因:

它们的CSS显示值为none。

它们是带有type="hidden"的表单元素。

它们的宽度和高度显式地设置为0。

祖先元素是隐藏的,因此该元素不会显示在页面上。

http://api.jquery.com/visible-selector/

下面是一个带有一个可见元素和一个隐藏元素的jsfiddle小例子:

http://jsfiddle.net/tNjLb/

其他回答

ie浏览器,Chrome浏览器,火狐浏览器……

跨浏览器函数isVisible()

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

完整的例子:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

问候,

Fernando

我不知道为什么你的代码不能在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。

这是来自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"

如果一个项是隐藏项的子项,is(":visible")将返回true,这是不正确的。

我只是通过添加“display:inherit”到子项来修复这个问题。这将为我解决这个问题:

<div class="parent">
   <div class="child">
   </div>
<div>

和CSS:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

现在可以通过改变父元素的可见性来有效地打开和关闭项目,$(element).is(":visible")将返回父元素的可见性

一个跨浏览器/版本的解决方案来确定一个元素是否可见,是添加/删除一个css类的元素显示/隐藏。元素的默认(可见)状态可以是这样的:

<span id=“span1” class=“visible”>span text</span>

然后在hide上删除类:

$ (" # span1”).removeClass(“可见”)hide ();

在节目中,再次添加:

$ (" # span1”).addClass(“可见的”),告诉();

然后,使用下面的命令来确定元素是否可见:

如果($ (" # span1 ") .hasClass(“可见”)){/ /做某事}

这也解决了在大量使用":visible"选择器时可能出现的性能影响,jQuery文档中指出了这一点:

大量使用此选择器可能会影响性能,因为它可能迫使浏览器在确定可见性之前重新呈现页面。通过其他方法跟踪元素的可见性,例如使用类,可以提供更好的性能。

jQuery官方API文档:visible选择器