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 的查询。

Answer 2

请参阅this哪个将是有问题的对象（仅.hide_list_scrollbar在 div 中查找触发事件的类。）：

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

Answer 3

如前所述，this用作上下文来引用触发该事件的元素。然后您可以hide_list_scrollbar在该元素中找到 div 并隐藏/显示它。另外，我会使用它，因为它是和hover的简写mouseentermouseleave

$(".a_list").hover(
    function(){
        $(this).find('.hide_list_scrollbar').hide();
    }, 
    function(){ 
        $(this).find('.hide_list_scrollbar').show(); 
    }
);