作者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/m.aspx?n=bbs/Ajax/M.1474963341.A.B9B.html
1F：→ shiningboy: 感謝指導 學習中 謝謝感恩 09/28 00:33