作者icydream (巧虎)
看板Ajax
标题Re: [问题] get NodeList index
时间Tue Sep 27 16:02:18 2016
※ 引述《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>
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.230.192.103
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1474963341.A.B9B.html
1F：→ shiningboy: 感谢指导 学习中 谢谢感恩 09/28 00:33