使用for循環創建元素和事件偵聽器

我有一個對象數組，我定義了一個函數來使用this關鍵字引用這個對象。使用for循環創建元素和事件偵聽器

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; 
}

我想添加列表項到一個HTML循環使用for循環，併爲我的函數添加事件監聽器在同一時間。爲什麼它不起作用？

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

來源

2015-12-21 Ollie_W

您是否檢查過瀏覽器控制檯的錯誤？如果該處理程序實際被調用，代碼（如發佈）將導致錯誤; 'currentCat'，'photo'，'catNow'和'clicker'沒有定義。 – Pointy

我還沒有發佈我所有的代碼，只是有問題的部分 –

您是否將您創建的新元素放入DOM中？ – 2015-12-21 18:28:12

您需要使用Function.prototype.bind設置正確this範圍。

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

來源

2015-12-21 17:48:12

你確定嗎？ 'this'應該由事件監聽機制設置爲元素。 – 2015-12-21 18:31:15

@torazaburo [Positive]（https://jsfiddle.net/p4L7aoe1/）。這將'this'設置爲數組中的對象。 –

我有這個工作，也許你可以找出你的代碼出了什麼問題。我很難說出你的問題是什麼，因爲代碼的重要部分從你發佈的內容中遺漏了。

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()

來源

2015-12-21 18:17:34

使用for循環創建元素和事件偵聽器

回答

相關問題