javascript - 使 标签都具有相同的 jquery mousedown/hover 效果，而无需单独的 id

Question

我知道这是错误的，但我想模拟我想要完成的事情。

我怎样才能做到每次<li>特定 <ul class="myul"> 内的元素具有相同的 mousedown/mouseout/hover/etc 效果，但单独而不是一次全部效果。

目前，如果您将鼠标悬停或单击一个 <li>这种效应发生在他们所有人身上。我不想要个人 ID，因为 <li>'s不会手动更新 - 并且数量总是会变化。

 $(".deleteIcon").mouseover(function(){
     $(".deleteIcon").closest('li').css("opacity", "0.7");
 });

 $(".deleteIcon").mouseout(function(){
     $(".deleteIcon").closest('li').css("opacity", "1");
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

 $(".deleteIcon").mousedown(function(){
     $(".deleteIcon").closest('li').css("background-color", "#76101c");
 });

 $(".deleteIcon").mouseup(function(){
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

<ul>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 

</ul>

Answer 1

在处理程序内部时，将您的 $('.deleteIcon') 查询热交换为更特定于上下文的 $(this) 查询。

$(".deleteIcon")
.mouseover(function(){
    $(this).closest('li').css("opacity", "0.7");
})
.mouseout(function(){
    $(this).closest('li').css("opacity", "1");
    $(this).closest('li').css("background-color", "#89b8d7");
})
.mousedown(function(){
    $(this).closest('li').css("background-color", "#76101c");
})
.mouseup(function(){
    $(this).closest('li').css("background-color", "#89b8d7");
});