javascript - JQuery中，如何只对同一个类的当前div执行操作？

Question

html是这样的:

<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>
<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>

js是这样的:

$(".a_list").mouseenter(
    function(){
        $(".hide_list_scrollbar").hide();
    }
);
$(".a_list").mouseleave(
    function(){
        $(".hide_list_scrollbar").show();
    }
);

现在，鼠标事件在所有“a_list”div 上执行。我只想在实际激活鼠标事件的特定 div 上执行鼠标事件，而不是所有“a_list”div。我如何实现这一目标？谢谢!

Answer 1

向选择器添加上下文。见下文，

$(".hide_list_scrollbar", this).hide();

完整代码:

$(".a_list").mouseenter(function(){
    $(".hide_list_scrollbar", this).hide();
}).mouseleave(function(){
    $(".hide_list_scrollbar", this).show();
});

或者你可以像下面这样使用.find，

$(".a_list").mouseenter(function(){
    $(this).find(".hide_list_scrollbar").hide();
}).mouseleave(function(){
    $(this).find(".hide_list_scrollbar").show();
});

注意:我已链接您的调用以减少对 DOM 的查询。