Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Two ways to implement click list pop-up list index_javascript skills

Two ways to implement click list pop-up list index_javascript skills

WBOY

Release： 2016-05-16 17:40:46

Original

1304 people have browsed it

Method one, use event bubbling to delegate to the parent node of the list for processing:

Copy code The code is as follows:

 
var ulObj = document.getElementById("myUl"); 
ulObj.onclick = function (event) { 
var tg = event.target; 
 var liArray = ulObj.getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i ) { 
if (liArray[i] === tg) { 
 alert(i 1); 
} 
} 
} 

Method 2, use closure :

Copy code The code is as follows:

 
var liArray = document.getElementById("myUl").getElementsByTagName("li"); 
 for (var i = 0; i < liArray.length; i ) { 
(function () { 
var n = i; 
liArray[i].onclick = function () { 
 alert(n 1); 
} 
})(i) 
} 

HTML code:

Copy code The code is as follows:

 
haha

heihei

hehe

gaga

Related labels：

list pop up

source：php.cn

Previous article：Value transfer between Iframes in JS and application between subpages and parent pages_javascript skills Next article：Summary of nine js methods to pop up dialog boxes_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author