jquery - 在多个实例中应用 Jquery

Question

我有一个悬停功能（见下面的代码），它在我应用的类上提供了一个下拉文本段落。这在指定的类上运行良好。

$('.job_container').hover(function(){
   $(".job_subheading").animate({top: "30px }, 200);},
      function(){
            $(".job_subheading").animate({
        top: "0px" }, 200);
      });

但是，我想用不同的下拉段落添加更多这些类的实例。当我这样做然后将鼠标悬停在一个上时，下拉菜单将应用于所有人，因为它们具有相同的类。

我应该将类更改为 id 并为我希望使用的每个实例重新编写代码吗？在多个实例中应用代码的最简洁方法是什么？

谢谢你的帮助，加文

Answer 1

您应该使用子选择器：

$('.job_container').hover(function(){
$(this).children(".job_subheading").animate({
top: "30px }, 200);},
                      function(){
$(this).children(".job_subheading").animate({
top: "0px" }, 200);

所以，你的 html 必须是这样的：

<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>
<div class="job_container"><div class="job_subheading"></div>something else</div>