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>

在多个实例中应用Jquery

1 个答案: