Javascript 使用for循环创建元素和事件侦听器

我有一个对象数组，我定义了一个函数来使用this关键字引用这个对象

var catArray = [toodles, whiskers, cornelius, poko, flufflepuss];

function catClicker() {
  currentCat.textContent = this.name;
  photo.src = this.src;
  console.log("clicked on " + this.name);
  catNow = this;
  clicker.textContent = this.clicks;
}

我试图使用for循环将列表项添加到HTMLUL，同时为我的函数添加事件侦听器。为什么它不起作用

for (var i = 0; i < catArray.length; i++) {
  var item = document.createElement('li');
  item.appendChild(document.createTextNode(catArray[i].name));
  item.addEventListener("click", catClicker); 
}

for（变量i=0；i

您需要使用设置正确的

此范围

item.addEventListener('click', catClicker.bind(catArray[i]));

我有这个工作，也许你可以从这里找出你的代码有什么问题。我很难说出你的问题是什么，因为你发布的内容中缺少了重要的代码

function whenReady(){
  for (var i = 0; i < catArray.length; i++) {
  var item = document.createElement('li');
  var d
  item.appendChild(document.createTextNode(catArray[i].name));
  item.attributes.setNamedItem(
    (d=document.createAttribute('data-catArray-idx'),d.value=i,d)
  )
  document.body.appendChild(item)
  item.addEventListener("click", catClicker);
  catClicks.set(catArray[i],{clicks:0})
  }
  catView=CatView().setCat(catArray[0]).appendToElement(document.body)
}

var catView
var catClicks=new WeakMap()
var catArray = [
  {name: "toodles",url:"images/toodles.jpg",height:100,width:150},
  {name: "whiskers",url:"images/whiskers.jpg",height:100,width:150},
  {name: "cornelius",url:"images/cornelius.jpg",height:100,width:150},
  {name: "poko", url:"images/poko.jpg",height:100,width:150},
  {name: "flufflepuss",url:"images/flufflepuss.jpg",height:100,width:150}
]

var clicks=0
function catClicker() {
  catView.setCat(catArray[this.attributes['data-catarray-idx'].value])
  console.log("clicked on " + catView.selectedCat.name);
  catClicks.get(catView.selectedCat).clicks++
}

var catViewId=0
var p=CatView.prototype
p.setCat=function(cat){
this.selectedCat=cat
this.update()
return this
}
p.appendToElement = function(element){
  element.appendChild(this.catView)
  return this
}
p.template= (name,photoURL) =>
  `<img src="${photoURL}" height=100 width=100><span>${name}</span>`
p.update=function(){
  this.catView.innerHTML = 
  this.template(
  this.selectedCat.name, this.selectedCat.url
  )
  return this
}
p.toString=function(){this.selectedCat.name + 'view'}
function CatView(){
  var me,cv,id
  id = 'catView'+catViewId++
  me = Object.create(CatView.prototype)
  cv = me.catView = document.createElement('div')
  cv.id = id;
  return me
}
whenReady()

whenReady（）时的函数{
对于（变量i=0；i
`${name}`
p、 更新=函数（）{
this.catView.innerHTML=
这是一个.template(
this.selectedCat.name，this.selectedCat.url
)
还这个
}
p、 toString=function（）{this.selectedCat.name+'view'}
函数CatView（）{
变量me、cv、id
id='catView'+catViewId++
me=Object.create（CatView.prototype）
cv=me.catView=document.createElement（'div'）
cv.id=id；
还我
}
whenReady（）
您是否已检查浏览器控制台是否存在错误？如果实际调用该处理程序，代码（如发布的）将导致错误
currentCat
、
photo
、
catNow
和
clicker
未定义。我没有发布所有代码，只是发布了有问题的部分。您是否将创建的新元素放入DOM中？确定吗<代码>此

应通过事件侦听机制设置为元素。@torazaburo。这将

此

设置为数组中的对象。