Re: [问题] get NodeList index

楼主: icydream (巧虎)   2016-09-27 16:02:18
※ 引述《shiningboy ()》之铭言:
: 想请问各位版友
: 如果有一个容器 div#container,底下有 4 个 children
: 也就是 nodeList 里面有 index = 0 , 1 , 2 , 3 的子元素
: 然后在 container 加上 click 的 EventListener 之后
: 请问有没有方法可以得到 被 click 的 子元素的 index??
: 也就是说 例如:我如果 click 第二个子元素 可以 get 1
: 再拜托各位解惑了
: 谢谢
写了一段程式码,希望有符合您的需求,说明如下:
div下包含了4个按钮,并定义click事件及其处理的函式,
当按钮按下时,会把自己的index放到1个object里,
并存放至event.data属性里,
由于事件会bubble到div,
所以div也需定义一个click事件处理函式,
功能在于把event.data.index alert出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#container {
border-style: solid;
width: 50%;
height: 100px;
}
</style>
<script text="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
var btnList = document.querySelectorAll('#container > button'),
container = document.querySelector('#container');
for(var i = 0; i < btnList.length; i++) {
btnList[i].addEventListener('click', function(event, index) {
return function(event) {
event.data = {index: index};
};
}(event, i));
}
container.addEventListener('click', function(event) {
if(event.data) {
alert(event.data.index);
}
else {
alert('尚未按下按钮');
}
});
});
</script>
</head>
<body>
<div id="container">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
</div>
</body>
</html>
作者: shiningboy   2016-09-28 00:33:00
感谢指导 学习中 谢谢感恩

Links booklink

Contact Us: admin [ a t ] ucptt.com