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/

当前回答

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

显示:inline-block;

2013-07-05 13:22:55

其他回答

有一种奇怪的情况，如果元素被设置为显示:内联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();
});

2013-01-16 17:09:02

jQuery的:visible选择器似乎不适用于Chrome中的一些内联元素。解决方案是添加一个显示样式，比如“block”或“inline-block”来让它工作。

另外请注意，jQuery对可见内容的定义与许多开发人员有所不同:

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

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

能见度:hidden或不透明度:0的元素被认为是可见的，因为它们仍然占用布局中的空间。

另一方面，即使它的可见性被设置为隐藏或不透明度为零，它仍然对jQuery可见，因为它消耗空间，当CSS显式地表示其可见性为隐藏时，这可能会令人困惑。

不在文档中的元素被认为是隐藏的;jQuery是类时，无法知道它们是否可见文档，因为它取决于适用的样式。所有选项元素都被认为是隐藏的，不管它们是什么选中状态。在动画中隐藏元素时，会考虑该元素直到动画结束都可见。在动画中显示元素时，该元素被认为在开始处可见动画。

看它最简单的方法是，如果你能在屏幕上看到元素，即使你看不到它的内容，它也是透明的，它是可见的，也就是说它占据了空间。

我稍微清理了一下你的标记，并添加了一个显示风格(即设置元素显示为“块”等)，这对我来说是有效的:

小提琴

官方API参考:可见

从jQuery 3开始，:visible的定义发生了轻微的变化

jQuery 3稍微修改了的含义:可见的(因此是的) :隐藏)。从这个版本开始，将考虑元素 :如果它们有任何布局框，包括那些零宽度的布局框，则可见和/或高度。例如，br元素和带有no . 内容将由:visible选择器选择。

2011-12-01 06:30:43

我需要使用可视性:hidden而不是display:none，因为可见性需要事件，而显示不需要。

因此写入。attr('visibility') === "visible"

2016-06-27 15:19:06

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

2013-10-30 15:00:43

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

然后在hide上删除类:

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

在节目中，再次添加:

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

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

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

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

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

jQuery官方API文档:visible选择器

2015-12-04 12:43:22

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

推荐文章

最新文章

标签