在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對象將成為有問題的對象（僅在觸發事件的div中查找.hide_list_scrollbar類。）：

$(".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因為它是mouseenter和mouseleave的簡寫

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