在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的查询.