jQuery ' .is(":visible") '在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，即使它是真的。

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

jsfiddle.net/wju2r/4/

当前回答

我认为这与我们HTML中的一个怪癖有关，因为同一页面上的其他地方工作得很好。

我能够解决这个问题的唯一方法是:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

2012-03-06 17:18:31

其他回答

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

2016-02-03 07:04:06

我认为这与我们HTML中的一个怪癖有关，因为同一页面上的其他地方工作得很好。

我能够解决这个问题的唯一方法是:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

2012-03-06 17:18:31

我在父样式上添加了next样式，.is(":visible")起作用了。

显示:inline-block;

2013-07-05 13:22:55

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

然后在hide上删除类:

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

在节目中，再次添加:

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

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

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

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

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

jQuery官方API文档:visible选择器

2015-12-04 12:43:22

我不知道为什么你的代码不能在chrome上工作，但我建议你使用一些变通办法:

$el.is(':visible') === $el.is(':not(:hidden)');

$el.is(':visible') === !$el.is(':hidden');

如果你确定jQuery在chrome中会给你一些不好的结果，你可以依靠css规则检查:

if($el.css('display') !== 'none') {
    // i'm visible
}

另外，您可能希望使用最新的jQuery，因为它可能修复了旧版本的bug。

2011-12-01 06:17:17

jQuery ' .is(":visible") '在Chrome中无效

推荐文章

最新文章

标签