所以,我得到这个代码从DOM里的数组是推动所有项目。
如何使每个项目的单击事件的工作?
编辑:
let items = {
item1: {
cost: 2200,
owned: 0,
type: "item type",
name: "item1",
desc: "item1 desc.",
img: "img/item1.gif"
},
item2: {
cost: 4400,
owned: 0,
type: "item type",
name: "item2",
desc: "item2 desc.",
img: "img/item2.gif"
},
};
for (let key of Object.keys(items)) {
if (items[key].owned==0) {
var el = document.createElement('div');
var domString = '<div class="item"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
el.innerHTML = domString;
el.addEventListener('click', function() {
items[key].owned = 1;
console.log(items[key].name + ' ' + items[key].owned);
});
document.getElementById('shop').appendChild(el.firstChild);
}
}
我希望的方式来改变点击一个项目变量。事件侦听器不会在此代码的工作。
使用对象键的分配的ID,然后添加事件监听器
for (let key of Object.keys(items)) {
if (items[key].owned==0) {
var el = document.createElement('div');
var domString = '<div id="' + items[key] + '"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
el.innerHTML = domString;
document.getElementById('shop').appendChild(el.firstChild);
}
}
for (let key of Object.keys(items)) {
document.getElementById(items[key]).addEventListener('click', function() {
items[key].owned = 1
});
}
或者你可以简单地指定的div元素上监听使用document.createElement
创建
for (let key of Object.keys(items)) {
if (items[key].owned==0) {
var el = document.createElement('div');
var domString = '<div id="' + items[key] + '"><div class="w3 h3 bg-center contain" style="background-image:url(' + items[key].img + ')"></div><span>'+ items[key].name +'</span><span>Price: '+ items[key].cost +'</span><span>'+ items[key].desc +'</span></div>';
el.innerHTML = domString;
el.addEventListener('click', function() {
items[key].owned = 1
});
document.getElementById('shop').appendChild(el);
}
}