問題

這個問題已經有一個答案:

  • 2001年12月31日終了的兩年期收入和支出及準備金和基金結餘變動報表 如何檢查元素是否隱藏在jQuery中? 2001年12月31日終了的兩年期收入和支出及準備金和基金結餘變動報表 55個答案 2001年12月31日終了的兩年期收入和支出及準備金和基金結餘變動報表 2001年12月31日終了的兩年期收入和支出及準備金和基金結餘變動報表

使用.fadeIn().fadeOut(),我一直在隱藏/顯示我的頁面上的元素,但有兩個按鈕,一個用於隱藏,一個用於顯示.我現在想要一個按鈕來切換兩者.

我的HTML / JavaScript是:

 <a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>
 
 function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}
 

我想要的HTML / JavaScript:

 <a onclick="toggleTestElement()">Show/Hide</a>
 
 function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}
 

如何檢測元素是否可見?

  最佳答案

你正在尋找:

 .is(':visible')
 

雖然您應該更改選擇器以使用jQuery,但考慮到您在其他地方使用它:

 if($('#testElement').is(':visible')) {
    // Code
}
 

必須指出,如果隱藏目標元素的父元素中的任何一個,那麼子元素上的.is(':visible')將返回false(這是有道理的).

jQuery 3

:visible具有相當慢的選擇器的聲譽,因為它必須遍歷檢查一堆元素的DOM樹.對於jQuery 3有好訊息,但是,正如這篇文章解釋(:visible的Ctrl F):

由於Paul 愛爾蘭在Google的一些偵探工作,我們發現了一些情況,當自定義選擇器如:可見在同一個文件中多次使用時,我們可以跳過一堆額外的工作.這個特殊情況現在快17倍!

請記住,即使有了這種改進,選擇器如:可見和:隱藏可能會很昂貴,因為它們依賴瀏覽器來確定元素是否實際顯示在頁面上.在最壞的情況下,這可能需要完全重新計算CSS樣式和頁面佈局!雖然我們在大多數情況下不阻止使用它們,但我們建議測試您的頁面,以確定這些選擇器是否導致效能問題.


更進一步擴充套件到特定的用例,有一個內建的jQuery函式,名為 $.fadeToggle() :

 function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}
 

  相同標籤的其他問題

javascriptjquery