How to simplify javascript event listeners? -
what want achieve is, when hovering on li id="a", corresponding ul id="aa" appears. have html code:
<ul> <li id="1">option1</li> <li id="2">option2</li> </ul> <ul id="11"> <li>option1.1</li> <li>option1.2</li> </ul> <ul id="22"> <li>option2.1</li> <li>option2.2</li> </ul>
and javascript code:
for (i=1; i<3; i++) { var fn = (function(i) { var li = document.getelementbyid(i); var ul = document.getelementbyid("" + + i); li.addeventlistener("mouseover", function() { ul.style.opacity = "1"; }, false); })(i); }
and works expected, here user jordan gray stated possible rid of loop , instead create 1 event listener list items - achieve here. unfortunately not understand code , thankful if explain me or suggest solution.
here how can use logic in code:
var ul = document.getelementbyid('ul-id'); ul.addeventlistener('mouseover', function(e) { if (e.target.nodename.touppercase() !== "li") return; document.getelementbyid("" + e.target.id + e.target.id).style.opacity = "0.6"; });
<ul id="ul-id"> <li id="1">option1</li> <li id="2">option2</li> </ul> <ul id="11"> <li>option1.1</li> <li>option1.2</li> </ul> <ul id="22"> <li>option2.1</li> <li>option2.2</li> </ul>
Comments
Post a Comment