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>

我不想将这些类首先用于<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();
   });
});

Class'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();
    });
});

编辑：不要因为我没有先说出来而赞不绝口，但事实上，@ FrankVerona在他的回答中提出了一个重点：确保你添加一个点（{ {1}}）如果您指的是某个类，则在您的选择器前面，即。 .应该是cbp-rfgrid > li，而只是其中一个错误。

对jQuery的几个元素使用相同的函数

2 个答案: