jQuery

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" class 应用于它。但是现在，只要我将鼠标悬停在页面显示的 "containerbutton" div、ALL "containercontent" div 上。我怎样才能只定位当前悬停的按钮？

这是我目前正在使用的脚本：

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

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

});
</script>

Answer 1

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

jQuery(document).ready(function() {

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

});

.displayclass{
  display : none;
  }

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

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

jQuery - How to apply addClass to only current instance?

addclass

hover

removeclass