使用访问索引（i）的普通JavaScript向for循环中的每个项添加Click事件

能否为for循环中的每个循环元素添加一个click函数？您可以在访问

i

（索引）位置的循环中添加

eventlistener

，还是必须查询DOM，然后使用单独的循环/forEach。目前我有：

let dataTest = [
        {
            name: "John Doe",
            age: '40',
        },
        {
            name: "Johanna Doe",
            age: '40',
        },
        {
            name: "Doe Child 1", 
            age: '8',
        },
        {
            name: "Doe Child 2", 
            age: '6',
        },
        {
            name: "Doe Child 3", 
            age: '6',
        },
    ];

function insertLI() {
let html = '';
for (let i = 0; i < dataTest.length; i++) {
        let display = dataTest[i];
        console.log(i);
        html += `
            <li class='element' id="item-in-array-${i}" data-idx="${i}">${display.name}, ${display.age}</li>`;
    };
    ulElement.innerHTML = html;
    const elem = document.querySelectorAll('.element');
    elem.forEach(function(clickHandler) {
    clickHandler.addEventListener('click', function() {
        let buttonElem = document.createElement('BUTTON');
        buttonElem.setAttribute('class', 'removeButton');
        buttonElem.innerHTML = 'Remove button';
            if(typeof(buttonElem) != 'undefined' && buttonElem != null && !buttonElem.length){
                this.insertAdjacentElement('afterend', buttonElem);
            } else{
            alert('Element does not exist!');
            };
        });
    });
};
insertLI();

让数据测试=[
{
姓名：“约翰·多伊”，
年龄:"40",，
},
{
姓名：“Johanna Doe”，
年龄:"40",，
},
{
姓名：“Doe儿童1”，
年龄:"8",，
},
{
姓名：“Doe儿童2”，
年龄：'6'，
},
{
姓名：“Doe儿童3”，
年龄：'6'，
},
];
函数insertLI（）{
让html=''；
for（设i=0；i${display.name}，${display.age}`；
};
ulElement.innerHTML=html；
常量elem=document.querySelectorAll（'.element'）；
元素forEach（函数（clickHandler）{
clickHandler.addEventListener（'click'，函数（）{
let buttonElem=document.createElement（'BUTTON'）；
setAttribute（'class'，'removeButton'）；
buttonElem.innerHTML='Remove button'；
if（typeof（buttonElem）！=“undefined”&&buttonElem！=null&&buttonElem.length）{
此.insertAdjacentElement（'afterend'，buttonElem）；
}否则{
警报（'元素不存在！'）；
};
});
});
};
insertLI（）；

我知道我能做到：

const elem = document.querySelectorAll('.element');
let buttonElem = document.createElement('BUTTON');
buttonElem.setAttribute('class', 'removeButton');
buttonElem.innerHTML = 'Remove button';

for (let i = 0; i < elem.length; i++) {
    elem[i].addEventListener('click', function () {      
      console.log(this);
        elem[i].style.color = 'red';
        this.textContent = this.textContent.toUpperCase();
        if(typeof(buttonElem) != 'undefined' && buttonElem != null){
            this.insertAdjacentElement('afterend', buttonElem);
        } else{
            alert('Element does not exist!');
        }
    });
};

const elem=document.querySelectorAll（'.element'）；
let buttonElem=document.createElement（'BUTTON'）；
setAttribute（'class'，'removeButton'）；
buttonElem.innerHTML='Remove button'；
for（设i=0；i

这听起来可能是默认设置，但请尝试JQuery。 使用下面的代码，您可以选择数组中的所有

项-*

元素，并为每个元素创建事件处理程序

$('[id*="item-in-array-"]').each(function () {
    $(this).click(function () {
        // do stuff
    }
}

虽然实际上您应该这样做，因为您不需要手动创建处理程序

$('[id*="item-in-array-"]').click(function () {
   // do stuff with this
}

如果存在动态元素，您可能希望使用委派：

$('parent-div').on('click', '[id*="item-in-array-"]', function () {
    // do stuff with this
    // This will be item-in-array still, not parent
}

---

这样，无论您是否添加新项目，都不需要分配新的处理程序

谢谢，但我想知道如何使用Vanilla JavaScript