當多個項目包含所述類時，jQuery按類顯示/隱藏

Question

在此先感謝幫助我（對於那些有時間和願意的人）。

我寫過這個劇本：

$(document).ready(function() {
  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').mouseover(function() {
    $('.foliobtn').show();
    return false;
  });
  $('.foliobottom').mouseout(function() {
    $('.foliobtn').hide();
    return false;
  });
  $('.foliobottom').mouseover(function() {
    $('.folionamedate').hide();
    return false;
  });
  $('.foliobottom').mouseout(function() {
    $('.folionamedate').show();
    return false;
  });
});

並將其放在此頁面http://www.fraservalley-webdesign.com/portfolio/test.php 。

它的工作原理除了它當然顯示/隱藏每個具有適當類的元素，而不僅僅是我正在盤旋的那個元素。 我不能唯一地命名每一個，因為會有幾十個，它將是數據庫驅動的內容。

有沒有人知道一種簡單的方法來隔離我在腳本中懸停的項目？

這有意義嗎？

Answer 1

變量“this”綁定到mouseover和mouseout處理程序中的觸發元素，所以你可以這樣說

$('.foliobtn',this).hide();

隱藏觸發元素中帶有“foliobtn”類的元素。

Answer 2

您可以使用另一個函數作為回調，這將有效地充當各種類型的切換，並使您的代碼更簡單。

試一試：

$(document).ready(function() {

  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').hover(function() {
    $(this).find('.foliobtn').show();
  }, function() {
    $(this).find('.foliobtn').hide();
  });

});

在這種情況下，您也不需要return false ，因為瀏覽器沒有此元素的默認行為。

return false更適合click <a>或表單提交，但實際上你可能想要使用preventDefault() 。

Answer 3

你能試試嗎？

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    // (a little sooner than page load)

    $('.foliobtn').hide();
    $('.folionamedate').show();

    // shows the slickbox on clicking the noted link
    $('.foliobottom').mouseover(function() { $(this).show(); return false; });
    $('.foliobottom').mouseout(function() { $(this).hide(); return false; });

Answer 4

您應該使用jquery 綁定方法 ：

就像是

$(document).ready(function() {
  // hides the slickbox as soon as the DOM is ready
  // (a little sooner than page load)
  $('.foliobtn').hide();
  $('.folionamedate').show();

  // shows the slickbox on clicking the noted link
  $('.foliobottom').mouseover(function(e) {
     $(this).find('.foliobtn').show(); 
     $(this).find('.folionamedate').hide();
  });
  $('.foliobottom').mouseout(function(e) { 
     $(this).find('.foliobtn').hide(); 
     $(this).find('.folionamedate').show();
  });
});

在這里，您不會根據類更改所有元素的可見性，而是使用此類和當前節點查找元素