對幾個元素使用相同的功能jQuery

Question

我是jQuery的新手，正在嘗試編寫一些小代碼，但是有問題。

這是代碼：

$(document).ready(function(){
  $(".first-li").hover(function(){
    $(".p-gallery").slideToggle();
  });
});

此代碼有效。 我想在列表中的每個元素上使用此代碼：

<ul class="cbp-rfgrid">
                <li class="first-li"><a href="images/col1.jpg"><img src="images/col1.jpg" /><p class="p-gallery">Title</p></a></li>
                <li class="first-li"><a href="images/col2.jpg"><img src="images/col2.jpg" /><p class="p-gallery">Title</p></a></li>
                <li><a href="images/col3.jpg"><img src="images/col3.jpg" /></a></li>
                <li><a href="images/col4.jpg"><img src="images/col4.jpg" /></a></li>
                <li><a href="images/col3.jpg"><img src="images/col3.jpg" /></a></li>
                <li><a href="images/col4.jpg"><img src="images/col4.jpg" /></a></li>
                <li><a href="images/col1.jpg"><img src="images/col1.jpg" /></a></li>
</ul>

我不想將這些類first-li用於<li> ，將p-gallery用於<p> ，只是為了使列表中的每個元素都可以使用此jQuery功能。 我嘗試過這樣的事情：

$(document).ready(function(){
$( "cbp-rfgrid > li" ).bind( "hover", function() {
  $("p").slideToggle();
});
});

但這不起作用。 :(請幫助我！謝謝！

Answer 1

我認為您的問題僅在JQuery句子上添加一個點就可以解決：

$(document).ready(function(){
   $( ".cbp-rfgrid > li" ).bind( "hover", function() {
     $("p").slideToggle();
   });
});

類'cbp-rfgrid'= $（“。cbp-rfgrid”）

標記名稱= $（“ cbp-rfgrid”）

您正在使用帶有該標簽的元素，但它們不存在。 希望對您有幫助。 編碼愉快！

Answer 2

假設列表中的每個元素如下所示：

<li class="first-li"><a href="images/col1.jpg"><img src="images/col1.jpg" /><p class="p-gallery">Title</p></a></li>

以下應該工作：

$(document).ready(function(){
    $( ".cbp-rfgrid > li" ).hover(function() {
      $(this).find("p").slideToggle();
    });
});

編輯 ：不試圖為我沒有先說的話而功勞，但是，@ FranVerona確實在他的回答中指出了一個重要觀點：如果要指代，請確保在選擇器前面添加一個點（ . ）。一個類，即 cbp-rfgrid > li應該.cbp-rfgrid > li ，但這只是錯誤之一。