jQuery`.is（「：visible」）`不適用於Chrome

174

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`.is（「：visible」）`不適用於Chrome

我使用jQuery的以下版本：jQuery的1.4.3.min.js

的jsfiddle鏈接：http://jsfiddle.net/WJU2r/4/

來源

2011-12-01 Saad Bashir

你能發表你的html代碼嗎？ – xdazz

最好在jsfiddle鏈接？並可能檢查與jquery.latest。 – xaxxon

makaspan可能顯示：無，或可見性：隱藏？ –

245

似乎jQuery的:visible選擇不會在Chrome的一些行內元素的工作。
解決方案是添加一個顯示樣式，如"block"或"inline-block"使其工作。

還要注意的是jQuery有比許多開發商如果他們消耗的文件空間

元素被認爲是可見的是可見有些不同的定義。
可見元素的寬度或高度大於零。

帶有visibility: hidden或opacity: 0的元素被視爲可見，，因爲它們仍佔用佈局中的空間。

不在文檔中的元素被視爲隱藏; jQuery確實沒有辦法知道它們在追加到文檔後是否可見，因爲它取決於適用的樣式。

所有選項元素被視爲隱藏，不管其選擇狀態如何。

在隱藏元素的動畫過程中，元素被視爲，直到動畫結束。在動畫中顯示元素時，該元素在動畫的開頭被視爲可見。

換句話說，元素消耗空間是可見的，這意味着元件必須具有寬度和高度，以消耗空間和可見。
另一方面，即使它的visibility設置爲hidden或不透明度爲零，它仍然是:visible jQuery，因爲它消耗空間，這可能會混淆，當CSS明確說它的可見性是隱藏的。

查看它的簡單方法是，如果您可以在屏幕上看到元素，即使看不到它的內容，它也是透明的，它是可見的，即佔用空間。

我清理您的標記一點，並增加了一個顯示樣式（即設置元素顯示爲「塊」等），這對我的作品：

FIDDLE

Official API reference for :visible

從jQuery 3開始，:visible的定義有輕微變化

jQuery 3稍微修改了:visible（因此也就是 :hidden）的含義。
從這個版本開始，元素將被視爲 :visible如果他們有任何佈局框，包括零寬度和/或高度。例如，br元素和沒有內聯的內聯元素將由:visible選擇器選擇。

來源

2011-12-01 06:30:43 adeneo

我也嘗試在jsFiddle中粘貼各個組件，並且它工作正常。我會嘗試在jsFiddle中複製錯誤，然後發佈鏈接。可能是代碼中的其他內容導致此錯誤 –

我已經複製了以下鏈接上的問題：jsfiddle.net/WJU2r/3 –

非常感謝！我不知道爲什麼，但設置#makespan {display：block; }使它工作。 –

我不知道爲什麼你的代碼無法在Chrome工作，但我建議你使用一些解決方法：

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

或

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

如果你是CE rtain jQuery的那個讓你在Chrome中一些不好的結果，你可以依靠的CSS規則檢查：

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

另外，你可能想使用latest jQuery，因爲它可能會從固定的舊版本的bug。

來源

2011-12-01 06:17:17

我已在以下鏈接上覆制該問題： http：// jsfiddle。net/WJU2r/3/ –

這個問題詳細說明'：hidden'和'：not（：visible）'之間的區別。 http://stackoverflow.com/questions/17425543/difference-between-hidden-and-notvisible-in-jquery –

函數是（'：visible'）或.is（'：hidden'）或是（'：not （：hidden）'）對性能非常不利 –

如果你讀了jQuery的文檔，有無數的理由不被考慮的東西可見/隱藏：

他們有沒有的CSS顯示值。

它們是type =「hidden」的表單元素。

及其寬度和高度被明確設置爲0。

的祖先元素是隱藏的，所以該元件沒有在網頁上顯示。

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

這裏有一個明顯的和一個隱藏的元素一個小的jsfiddle例如：

http://jsfiddle.net/tNjLb/

來源

2011-12-01 06:19:52 xaxxon

我在以下鏈接上覆制了該問題：jsfiddle.net/WJU2r/3 –

我認爲它與我們的HTML中的一個怪癖有關，因爲同一頁上的其他地方工作得很好。

我能解決這個問題的唯一辦法就是要做到：

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

來源

2012-03-06 17:18:31

一般來說，我生活在這個情況時，我對象的父母是隱藏的。例如，當HTML是這樣的：

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

，如果你問，如果孩子喜歡可見：

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

它將返回false，因爲其父是不可見的，這樣DIV不會是可見的，也。

來源

2012-11-22 12:51:36

的底部看到我的解決方案...在你的孩子集顯示「繼承」，這將複製從它的父項目的狀態，所以如果這是隱藏的elemtn.is（「：hidden」）將工作 – patrick

有一個奇怪的情況下，如果元素設置爲display: inline 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 infinity

我遇到了PhantomJS的這個問題，但在Chrome 47.0.2526上這似乎工作。見：http://jsfiddle.net/k4b925gn/2/ – ekkis

我在父項和.is（「：visible」）上添加了下一個樣式。

顯示：內聯塊;

來源

2013-07-05 13:22:55 Horatiu

IE瀏覽器，瀏覽器，火狐...

跨瀏覽器的功能「可見性（）」

//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>

問候，

費爾南多

來源

2013-10-30 15:00:43 Fernando

如果一個項目是隱藏項目的子項（「：visible」）將返回true，這是不正確的。

我只是補充修正了這個「顯示：繼承」的子項。這將固定爲我：

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

和CSS：

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

現在，該項目可以有效地開啓和關閉通過更改父的知名度，和$（元素）。是（「：可見」）將返回父項

來源

2014-11-30 18:24:32 patrick

的可視性跨瀏覽器/版本的解決方案，以確定一個元素是否是可見的，是添加/刪除CSS類上顯示/隱藏的元素。元素的默認（可見）狀態可能是例如這樣的：

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

然後在隱藏，刪除類：

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

在展會上，再次添加它：

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

然後，爲了確定元素是否可見，使用th是：

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

這也解決了性能問題，這可能在大量使用會發生「：可見」選擇，這是指出jQuery的文檔：

大量使用這種選擇可以具有性能影響，因爲它可能會強制瀏覽器在確定可見性之前重新呈現頁面。通過其他方法跟蹤元素的可見性，例如使用類，可以提供更好的性能。

Official jQuery API Documentation for ":visible" selector

來源

2015-12-04 12:43:22 Alex

這是從的jquery.js這塊代碼執行時（「：可見」）被稱爲：

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顯示屬性。它也取決於元素內容的寬度和高度。因此，確保元素具有一定的寬度和高度。而這樣做，你可能需要將顯示屬性設置爲"inline-block"或"block"

來源

2016-02-03 07:04:06 hkulur

我需要使用visibility：hidden的 insted的顯示：無因爲知名度發生的事件，而顯示不。

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

來源

2016-06-27 15:19:06 mitjajez

jQuery`.is（「：visible」）`不適用於Chrome

回答

相關問題