Question

这是我的HTML代码。

<ul class="listClass">
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
    <li>List4</li>
    <li>List5</li>
</ul>

我将onClick eventListener添加到子<li>，它应该输出该子<li>的正确索引

这里是javascript

var lists = document.querySelectorAll('.listClass li');
for (var i = 0; i < lists.length; i++) {
    lists[i].addEventListener('click', function (e) {
        console.log(e);
      console.log('My index:', i);
    }, false);
}

总是输出：我的指数：5

虽然我清楚地了解这一点，但它引用了i，是否还有其他方法可以存储i的正确值。

我发现了两种可能的方法。

1st：Jquery的index()方法。 https://api.jquery.com/index/

第二名：DOM事件委托。 What is DOM Event delegation?

有没有其他方法可以使用？感谢。

Answer 1

您可以为元素添加属性

＆＃13;

var list2 = document.querySelectorAll('.list2 li');

for (var i = 0; i < list2.length; i++) {  
  
  list2[i].index = i;
  
  list2[i].addEventListener('click', function(e) {
    
    alert('My index:' + e.target.index);
    
  });
  
}

＆＃13;

<ul class="list2">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

＆＃13;

在Javascript

1 个答案: