Make <li>标签都具有相同的jquery mousedown/hover效果而没有单独的id

Question

我知道这是错的,但我想模拟我想要完成的事情.

我如何制作它以使<li>特定内容<ul class="myul">中的每个元素具有相同的mousedown/mouseout/hover/etc效果,但是单独而不是一次全部.

目前,如果您悬停或点击其中一个<li>,则会对所有人产生影响.我不想要个人身份证,因为<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");
});