jQuery（'：visible'）表演很有趣。

我遇到了一個奇怪的問題，用jQuery測試對象的可見性。jQuery（'：visible'）表演很有趣。

我有這個測試JS：

alert($myObject.css('display')); 
alert($myObject.is(':visible'));

第一警報顯示「塊」，這是有道理的螢火清楚地表明，它被設置爲display：block，你可以看到在頁面上的對象瀏覽器。

雖然第二個提示顯示'false'。這對我來說根本沒有任何意義。

我誤解了is（'：visible'）的用法嗎？

來源

2012-03-19 DA.

你可以給出jsfiddle中的代碼示例嗎？一些更多的標記將有所幫助 – redDevil 2012-03-19 16:17:50

你是說你的元素*在頁面上是可見的，但'.is（'：visible'）'是錯誤的？ @ KARASZI的回答是正確的，但如果你的元素實際上是可見的，這可能是一個不同的問題。你能發表一個複製這個問題的小提琴嗎？ – nrabinowitz 2012-03-19 16:19:04

@ j08691如果對象設置爲display：block，並且我可以看到它，我希望is（）語句在這種情況下返回TRUE。 – 2012-03-19 16:19:12

考慮這個HTML：

<div id="div1" style="display: none;"> 
    <div id="div2"> 
     <p>Some div content</p> 
    </div> 
</div>

和這個JavaScript：

$myObject = jQuery('#div2'); 
alert($myObject.css('display')); // 'block' 
alert($myObject.is(':visible')); // false

有多種原因$myObject可能是不可見的，即使它有display: none風格集。詳情請參閱:visible selector docs。

現在有意義嗎？

來源

2012-03-19 16:17:18 Tadeck

除了我可以在瀏覽器中看到我的對象 - 它的父項沒有隱藏。 – 2012-03-19 16:21:12

@DA：你完全確定嗎？嘗試使用JavaScript處理'$ myObject'（例如，將其邊框設置爲紅色）並告訴我們結果是否如預期的那樣。如果'$ myObject'操作改變了你在瀏覽器中看到的內容，那麼給我們提供更多細節 - 嘗試通過提取顯示確切結果的代碼來縮小問題，並向我們顯示此代碼。 – Tadeck 2012-03-19 16:24:51

是的，已經做了整個BORDER黑客來看看它是否是正確的對象。我會嘗試拆除頁面，看看是否可以找到問題的來源併發布標記。 – 2012-03-19 16:27:23

:visible選擇器與display css屬性不等效。

從鏈接文件，可見是false時：

他們有沒有的CSS顯示值。
它們是type =「hidden」的表單元素。
它們的寬度和高度明確設置爲0.
祖先元素被隱藏，因此元素不會顯示在頁面上。

來源

2012-03-19 16:16:38

。在這種情況下，這些都不是真的。它被設置爲顯示：塊，它不是一個隱藏的表單元素，它沒有明確的高度或寬度爲零，你可以在頁面上看到它（所以它的祖先似乎並不隱藏） – 2012-03-19 16:20:30

我期待着jsFiddle鏈接，我真的很好奇這個問題的原因。 – 2012-03-19 23:30:44

我已經添加了一個解釋發生了什麼的答案。我有點尷尬。 ;） – 2012-03-19 23:54:35

從:visible Selector文檔：

元素可以被認爲是隱藏的幾個原因：

他們有沒有的CSS顯示值。

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

它們的寬度和高度明確設置爲0.

祖先元素被隱藏，因此元素不會顯示在頁面上。

檢查這些其他條件是否都是真的。

來源

2012-03-19 16:17:21

，則回答：

如果別人重視click事件到你的對象，你以前沒有意識到的，該事件可能會搞砸了，你試圖使用任何邏輯。;）

唉，這就是發生在這裏。另一個點擊事件已附加到該對象，該對象被設置爲隱藏其父對象。那是先發射 - 我的邏輯檢查之前，看看它是否可見。

最後：用戶錯誤。

當出現用戶錯誤問題時，應該存在某種形式的信譽懲罰。 ;）

來源

2012-03-19 23:53:11

感謝您的分享。 – 2012-03-20 07:08:09

jQuery（'：visible'）表演很有趣。

回答

相關問題