Portal_Zii Portal_Zii - 6 months ago 18
Javascript Question

Make <li> tags all have the same jquery mousedown/hover effects without individual id's

I know this is wrong but i wanted to simulate kind of what im trying to accomplish.

How do I make it so every

<li>
element inside a specific
<ul class="myul">
has the same mousedown/mouseout/hover/etc effects but individually instead of all at once.

Currently if you hover or click on one
<li>
the effect occurs to all of them. I don't want individual id's since the
<li>'s
wont be manually updated - and the number will always vary.

$(".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

Hotswap your $('.deleteIcon') queries for the more context-specific $(this) query, when inside the handler.

$(".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");
});