如何将Javascript对象的多个迭代链接到多个元素

Question

我有一个页面，它必须同时显示同一个Javascript对象的多个副本-它们稍后将被单独操作，因此每个元素都必须链接到对象的唯一副本。

我有一个(非常简化的(对象：

function Person(index){
this.index = index,
this.name = 'Dave',
this.photo = 'photo.jpg',
// ... other properties ...
this.changeName = function(name){
this.name = name;
}
// ... other methods ...
}

我在for循环中使用document.createElement来创建多个div，每个div都应该显示默认名称和照片，以及只运行该div的函数的按钮。索引被传递给新对象，div被显示在一个容器元素中。

function createPeople(num){
for(let i = 0; i < num; i++){
const individual = document.createElement('DIV');
individual.person = new Person(i);
const index = individual.person.index;
const name = '<p>' + individual.person.name + '</p>';
const button = '<button onclick=changeName()>Change name ' + index + '</button>';
// ... other HTML elements ...
individual.innerHTML = name + button;
document.getElementById('container').appendChild(individual);
}
}

按钮显示了正确的索引，但我不知道如何使它的changeName()函数以该div的特定对象为目标，或者使每个对象中的任何更改都反映在正确的div中

Answer 1

将按钮插入文档中，确保有对它的引用，然后对它使用addEventListener。不要使用内联处理程序。

此外，为了避免不希望的、可能不安全的脚本运行，只插入带有.innerHTML的静态HTML-对于来自用户的动态内容，请使用.textContent。

individual.innerHTML = `
<p></p>
<button>Change name ${i}</button>
`;
individual.querySelector('p').textContent = individual.person.name;
individual.querySelector('button').addEventListener('click', () => {
this.changeName();
});

不过，将individual实例分配给DOM元素的属性是很奇怪的——如果您需要在其他地方使用它，请考虑将Map元素映射到它们的实例。