jQuery`.is（“：visible”）`在Chrome中不起作用

207 
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即使是，它也会显示true。

我正在使用以下jQuery版本：jquery-1.4.3.min.js

jsFiddle链接：http：//jsfiddle.net/WJU2r/4/

jquery  google-chrome 
— 萨德·巴希尔（Saad Bashir）
source
1
最好在jsfiddle链接中？并可能使用jquery.latest进行检查。
— xaxxon
makaspan可能显示：无，或可见性：隐藏？
— Artur Keyan
也许暂时更新到最新的jQuery版本，只是为了排除jQuery错误？
— Strelok
1
另请参见：bugs.jquery.com/ticket/13132 似乎它将在1.12 / 2.2版中得到修复！–
— Glen Little
1
无需在if语句中添加“ == true”：if（$（“＃makespan”）。is（“：visible”））是
— 足够的

Answers:

273

看来jQuery的:visible选择器不适用于Chrome中的某些内联元素。解决方案是添加一种显示样式，例如"block"或"inline-block"使其起作用。

还要注意，jQuery对可见内容的定义与许多开发人员有所不同：

如果元素占用了文档中的空间，则认为它们是可见的。
可见元素的宽度或高度大于零。

换句话说，元素必须具有非零的宽度和高度，以占用空间并可见。

带有visibility: hidden或的元素opacity: 0被视为可见，因为它们仍然占用布局中的空间。

另一方面，即使将其visibility设置为hidden或不透明度为零，它仍然:visible使用jQuery，因为它占用了空间，当CSS明确表示其可见性已隐藏时，这可能会造成混淆。

不在文档中的元素被认为是隐藏的；jQuery无法确定将它们附加到文档后是否可见的方法，因为它取决于适用的样式。

无论所有选项元素处于选定状态，都将被视为隐藏。

在隐藏元素的动画过程中，该元素被视为可见，直到动画结束。在动画显示元素期间，该元素在动画开始时被视为可见。

观察它的简单方法是，如果您可以在屏幕上看到该元素，即使您看不到它的内容，它是透明的等，它也是可见的，即它占用了空间。

我稍微整理了一下标记，并添加了一种显示样式（即，将元素显示设置为“ block”等），这对我来说是有效的：

小提琴

的官方API参考 :visible

从jQuery 3开始，的定义:visible已稍有更改

jQuery 3略微修改了:visible（以及 :hidden）的含义。
从该版本开始，:visible如果元素具有任何布局框（包括宽度和/或高度为零的布局框），则将考虑 它们。例如，选择器br将选择没有内容的元素和内联元素:visible。

— 阿德尼奥
source
我还尝试将单个组件粘贴到jsFiddle中，并且效果很好。我将尝试在jsFiddle中复制错误，然后发布链接。代码中可能还有其他原因导致此错误
— Saad Bashir
我已经在以下链接上复制了问题：jsfiddle.net/WJU2r/3
— Saad Bashir
3
非常感谢您的努力！我不知道为什么，但是设置#makespan {display：block; }使它起作用。
— Saad Bashir），
原始海报的注释包含实际的解决方案IE，使您的跨度显示为：block。愚蠢的跨度默认情况下在chrome中是不可见的，但无论如何。
— 杰夫·戴维斯
如果您添加＆nbsp; 元素，因为如果元素没有内容，那么它在Chrome中是不可见的
— Briganti
67

我不知道为什么您的代码无法在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，因为它可能已修复了旧版本中的错误。

— gion_13
source
2
我已经在以下链接上复制了该问题：jsfiddle.net/WJU2r/3
— Saad Bashir
这个问题详述了:hidden和之间的区别:not(:visible)。stackoverflow.com/questions/17425543/...
— 马克Schultheiss
函数is（'：visible'）或.is（'：hidden'）或is（'：not（：hidden）'）对性能非常不利
— Diogo Cid
9

奇怪的情况是，如果将元素设置为display: inlinejQuery，则可见性检查失败。

例：

的CSS

#myspan {display: inline;}

jQuery的

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

要修复它，您可以在jQuery中隐藏该元素，并且than show/hide或toggle()应该工作正常。

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});
— 亚历克斯·拉什科夫
source
我的PhantomJS遇到了这个问题，但是在Chrome 47.0.2526上似乎可以正常工作。参见：jsfiddle.net/k4b925gn/2
— ekkis
8

我认为这与我们HTML中的怪异有关，因为同一页面上的其他位置都可以正常工作。

我能够解决此问题的唯一方法是：

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}
— 克里斯·杜特罗
source
7

如果您阅读了jQuery文档，则有很多原因导致某些东西不被视为可见/隐藏：

它们的CSS显示值为none。

它们是type =“ hidden”的表单元素。

它们的宽度和高度明确设置为0。

祖先元素被隐藏，因此该元素未显示在页面上。

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

这是一个小的jsfiddle示例，其中包含一个可见元素和一个隐藏元素：

http://jsfiddle.net/tNjLb/

— Xaxxon
source
我已经在以下链接上复制了该问题：jsfiddle.net/WJU2r/3
— Saad Bashir
7

Internet Explorer，Chrome，Firefox ...

跨浏览器功能“ 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>

问候，

费尔南多

— 费尔南多
source
3

通常，当我的对象的父项被隐藏时，我会遇到这种情况。例如，当html像这样时：

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

如果您问孩子是否可见，例如：

    $(".div-child").is(":visible");

它会返回false，因为它的父级不可见，因此div也将不可见。

— cen
source
看到下面的我的解决方案...在您的子集显示为'inherit'中，它将复制其父项的状态，因此，如果隐藏了，则elemtn.is（“：hidden”）将起作用
— patrick
3

确定元素是否可见的跨浏览器/版本解决方案是在show / hide上向该元素添加/删除css类。元素的默认（可见）状态例如可以是这样：

<span id="span1" class="visible">Span text</span>

然后在隐藏时，删除该类：

$("#span1").removeClass("visible").hide();

在节目中，再次添加：

$("#span1").addClass("visible").show();

然后使用以下命令确定该元素是否可见：

if ($("#span1").hasClass("visible")) { // do something }

这也解决了性能影响，这可能在大量使用“：visible”选择器时发生，这在jQuery文档中指出：

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

“：visible”选择器的官方jQuery API文档

— 亚历克斯
source
1

我在父级上添加了下一个样式，.is（“：visible”）起作用了。

显示：inline-block;

— 霍拉蒂
source
0

如果某项是隐藏项的子项，则is（“：visible”）将返回true，这是不正确的。

我只是通过在子项上添加“ display：inherit”来解决此问题。这将为我修复：

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

和CSS：

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

现在，可以通过更改父项的可见性来有效地打开和关闭该项目，并且$（element）.is（“：visible”）将返回父项的可见性

— 帕特里克
source
0

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

— ku
source
0

我需要使用visibility：hidden的 insted的的显示：没有，因为知名度需要事件，而显示没有。

所以我做 .attr('visibility') === "visible"

— 米贾耶斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.