Question

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

<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>

Answer 1

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

＆＃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;

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

1 个答案: