如何調用jquery函數來檢查元素的可見性

我試圖檢測ID爲的html元素的jQuery的可見性（部分或完整），並覆蓋並刪除元素。因爲它不工作，我已經剝離了該功能，只是在檢測到元素時提醒消息。我正在使用.visible方法，但它沒有提示消息。如何調用jquery函數來檢查元素的可見性

我創建的腳本稱爲checkVisible.js和很簡單：

$(function() { 
    alert('START OF FUNCTION'); 
    $('#cover').visible(), function() { 
     alert('COVER VISIBLE'); 
    }; 
});

的HTML是：

<!DOCTYPE html> 
 

 
<head> 
 
    <link rel="stylesheet" style="text/css" href="annie.css"> 
 
    <script src="js/visible.js"></script> 
 
    <script src="js/jquery-3.1.1.js"></script> 
 
    <script src="js/jquery.visible.min.js"></script> 
 
    <script src="js/checkVisible.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="nav"> 
 
     <div id="logo"><img id="logo_img" src="images/annie2.gif"></div> 
 
     <div id="navbar"> 
 
      <p class="hdr">SHOP</p> 
 
      <p class="hdr">JOBS</p> 
 
      <p class="hdr">ABOUT US</p> 
 
      <p class="hdr">BOOKINGS</p> 
 
      <p class="hdr">PAYMENTS</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="holder"> 
 

 
     <div id="lh_top_bar"> 
 
      <div id="lh_top_bar_text">ANNIE</div> 
 
     </div> 
 
     <div id="rh_top_bar"></div> 
 
     <div id="lh_bar"> 
 
      <div id="line"></div> 
 
      <div id="lh_bar_text">Collection 2016/2017</div> 
 
     </div> 
 

 
     <div class="image1"> 
 
      <img class="cs--img1" src="images/shoe_black_pair_small.jpg" alt="black shoe"> 
 
     </div> 
 

 
     <div id="rh_bar"> 
 
      <div id="rh_bar_text">We will be at White Show January 20, 2017</div> 
 
     </div> 
 
     <div id="bottom_bar"> 
 
      <div id="discover">DISCOVER COLLECTION</div> 
 
      <div id="lh_bottom_bar"></div> 
 
      <div id="rh_bottom_bar"></div> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="holder2"> 
 

 
     <div id="lh_top_bar"> 
 
      <div id="lh_top_bar_text">ANNIE</div> 
 
      </div> 
 
      <div id="rh_top_bar"></div> 
 
      <div id="lh_bar"> 
 
       <div id="line"></div> 
 
       <div id="lh_bar_text">Collection 2016/2017</div> 
 
      </div> 
 

 
      <div class="image1"> 
 
       <img class="cs--img1" src="images/canstockphoto28075264.jpg" alt="gucci"> 
 

 
      <!-- ID="COVER" --> 
 

 
      <div id="cover"></div> 
 
     </div> 
 

 
     <div id="rh_bar"> 
 

 
      <div id="rh_bar_text">Instagram</div> 
 
     </div> 
 
     <div id="bottom_bar"> 
 
      <div id="discover">[email protected]</div> 
 
      <div id="lh_bottom_bar"></div> 
 
      <div id="rh_bottom_bar"></div> 
 
      <div id="copyright">© 2016 ALL RIGHTS RESERVED ANNIE COLLECTIONS</div> 
 
     </div> 
 

 
    </div> 
 

 

 
    </body> 
 

 
</html>

據函數的顯示的開始，但當元素變得可見時，它不顯示COVER VISIBLE。

看來它無法找到.visible方法。我究竟做錯了什麼？

來源

2016-11-20 Trevor

與此，而不是替換它：

$('#cover').visible(function() { // you must wrap your function within the parentheses of visible 
    alert('COVER VISIBLE'); 
});

的問題是，你沒有包裹visible()函數的括號內的function()。因此在運行visible()時它不會運行。

希望得到這個幫助！ :-)

編輯：

我注意到，visible()實際上不是jQuery的本地功能。

那麼試試這個替代：

if ($("#cover").is(":visible") == true) { 
    alert("COVER VISIBLE"); 
}

來源

2016-11-20 05:24:04

謝謝，我知道可見（）不是本地人。它來自github，我知道它可以檢測到元素在視口中何時變得可見，而可見Selector認爲「如果元素消耗文檔中的空間，則認爲它們是可見的。可見元素的寬度或高度大於零。」：可見的確實起作用，因爲只要頁面呈現，元素被檢測到並且警報被觸發。但這不是我所需要的。 – Trevor

如何調用jquery函數來檢查元素的可見性

回答

相關問題