Implementation Method of Clicking li to Pop Up li Index Under ul Using JS

Firstly, we need an html structure

<div >
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>

We iterate over all li under ul and add click events. Generally, we add click events within the for loop, but the result is not what we expected. Why is that?????

Let's take a look at our js code

var li = document.getElementsByTagName('li');
for(var i = 0;i<li.length;i++{ 
(function(Index){
li[i].addEventListener('click',function(e){
alert('I am link #'+ Index );
},false);
})(i)
}

We have achieved it!!!

This is the effect we want to achieve. Clicking on the corresponding li gives the corresponding index.

Let's briefly describe the implementation process

(function () { /* code */ })(); // It is recommended to use this
(function () { /* code */ })(); // But this can also be used

This is the code snippet I organized for the anonymous function or self-invoking function;

In essence, we use the principle of closure to implement the pop-up index, we pass a parameter Index to the anonymous function, which is our index i, and implement closure inside the function.

Index will always remain within the scope block, so when we click again, it will call the index saved in the scope block to achieve the function we need;

Here are some simple examples

　　　　function num(){
var i = 0;
return function(){
console.log(i++);
}
}
var counter = num();
console.log(counter()); // 0　　console.log(counter()); // ?? 
　var counter1 = (function(){
var i = 0;
return {
get:function(){
return i;
},
set:function(val){
i = val;
},
increment:function(){
return ++i;
}
}
});　　　　 
　　　　console.log(counter1);
　　　　console.log(counter1.get()); // ?
　　　　console.log(counter1.set(3)); // ?
　　　　console.log(counter1.increment()); // ?
　　　　console.log(counter1.increment()); // ?
console.log(counter1);
console.log(counter1.get()); // 0
console.log(counter1.set(3)); // 3
console.log(counter1.increment()); // 4
console.log(counter1.increment()); // 5

The above is what the editor introduces to everyone about how to traverse the li under ul and pop up the index of li with JS, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Thank you very much for everyone's support of the Yanaoliao tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3If you find any infringing content, please send an email to codebox.com (replace # with @ when sending an email) to report it, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.