jQuery - 如何将addClass应用于当前实例?

时间:2016-06-01 21:33:36

标签: jquery hover addclass removeclass

我的代码在页面上出现了数百次:

<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>

<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>

<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>

我正在努力实现这一点:每当“containerbutton”悬停时,我希望它下面的“containercontent”div显示并应用“displayclass”类。但是现在,只要我将鼠标悬停在“containerbutton”div上,所有“containercontent”div就会显示在页面上。如何仅定位当前悬停的按钮?

以下是我目前正在使用的脚本:

<script>
jQuery(document).ready(function() {

$(".container .containerbutton").hover(function () {
    $(".containercontent").addClass('displayclass');
    }, function(){
    $(".containercontent").removeClass('displayclass');
});

});
</script>

1 个答案:

答案 0 :(得分:2)

您必须使用this引用来获取当前悬停元素

&#13;
&#13;
jQuery(document).ready(function() {

$(".container .containerbutton").hover(function () {
    $(this).next().addClass('displayclass');
    }, function(){
    $(this).next().removeClass('displayclass');
});

});
&#13;
.displayclass{
  display : none;
  }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="containerbutton">1</div>
<div class="containercontent">content</div>
</div>

<div class="container">
<div class="containerbutton">2</div>
<div class="containercontent">content</div>
</div>

<div class="container">
<div class="containerbutton">3</div>
<div class="containercontent">content</div>
</div>
&#13;
&#13;
&#13;