Question

我在使用forEach循环索引ul列表时遇到麻烦。该列表的子元素是动态创建的。将事件处理程序添加到每个列表项并在控制台上单击后记录其innerHTML或textContent后，将返回字符串“ START”，而不是包含HTML或Text的元素。

第二，我希望能够返回elements索引，但是遇到另一个问题。当索引包含每个列表项文本的创建数组时，我返回-1，而不是数组元素的实际索引。向任何可以帮助我弄清楚这一点的人提供支持！代码如下：

var个项目= document.querySelectorAll（“＃options-list> li”）;

itemList = [];

items.forEach((item) => {
    itemList.push(item.textContent);
});

items.forEach((item)=>{
    item.addEventListener("click", () => {
        var option = itemList.indexOf(this.textContent);
        console.log(this.innerHTML);
    });
});

Answer 1

我发现我可以使用事件对象来索引我按下的元素。看一看！如果他们是其他有替代解决方案的人，请发布！

items.forEach((item)=>{
    item.addEventListener("click", (e) => {
        var option = itemList.indexOf(e.target.textContent);

    });
});

Answer 2

一个快速的技巧是使用传播运算符使用NodeList将querySelectorAll返回的spread operator转换为数组。 假设您要保存它供以后使用，否则只需在NodeList上使用forEach。

在forEach中，您可以重用侦听器内部的item变量，而不是使用this。由于箭头功能=>而不能使用。索引也传递到forEach callback。

var items = [...document.querySelectorAll('#options-list > li')]
items.forEach((item, index) => item.addEventListener('click', e => {
    console.log(index, item.innerHTML)
}))

在列表索引期间将字符串“ START”打印到控制台

2 个答案: