如何在循環中添加onclick事件時添加唯一參數？

我想要做的是使用參數在每個按鈕上添加一個獨特的onclick，這樣我就可以在使用函數參數點擊它們時識別每個按鈕。如何在循環中添加onclick事件時添加唯一參數？

function createProducts() { 
    for(var i = 0; i < products.length;i++) { 
     var li = document.createElement("li"); 
     li.className = "products"; 
     li.onclick = "purchase(" + i + ")"; 
     li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>"; 
     document.getElementById("list").appendChild(li); 
    } 
} 

function purchase(id) { 
    alert(id); 
}

我已經試過

li.onclick = purchase(i);

而且

li.onclick = "purchase(" + i + ")";

但所有這些工作。

來源

2015-10-26 timzand

試試這個在li創建循環：

li.onclick = purchase; 
li.dataset.index = i;

在purchase事件。

來源

2015-10-26 11:12:29 DontVoteMeDown

謝謝，它的工作！時間來了解它爲什麼起作用了！ – timzand

@timzand正如TJ所解釋的那樣，您將循環時間中的*索引*存儲到元素上名爲data屬性的屬性中。隨時隨地都可以隨時隨地閱讀。所以，在click事件函數中，您只需閱讀它。 – DontVoteMeDown

@timzand請記住標記爲已接受解決問題的答案。 – DontVoteMeDown

你有幾個選擇。您可以爲您的處理程序創建一個變量，以便關閉而不會改變（如i）。你可以做你的情況與Function#bind：

function createProducts() { 
    for(var i = 0; i < products.length;i++) { 
     var li = document.createElement("li"); 
     li.className = "products"; 
     li.onclick = purchase.bind(li, i); // <==== 
     li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>"; 
     document.getElementById("list").appendChild(li); 
    } 
}

Function#bind返回一個函數，調用它時，會調用原始與特定this值（我們將其設置爲元素的引用）和任何參數你通過bind（在我們的案例中，i）。由於當我們調用bind時，被綁定的值是i的值，而不是當點擊發生時，它不會像i那樣改變。

或者，你可以存儲元素本身作爲一個屬性上id，然後使用你的處理程序：

function createProducts() { 
    for(var i = 0; i < products.length;i++) { 
     var li = document.createElement("li"); 
     li.className = "products"; 
     li.setAttribute("data-id", i); 
     li.onclick = purchase; 
     li.innerHTML = products[i][0] + "<span class=\"price\"> Klikk/s: " + products[i][1] + " Pris: " + products[i][2] + "</span>"; 
     document.getElementById("list").appendChild(li); 
    } 
} 

function purchase() { 
    // Use this.getAttribute("data-id") here to get the value 
}

注意，在這兩種情況下，我們使用的是真正的函數引用，而不是字符串。您可以在元素上使用onXyz屬性的函數，當然也可以使用標準addEventListener（或舊IE上的attachEvent）。有關數據屬性（dataset）here和here

function purchase(id) { 
    var index = this.dataset.index; 
}

來源

2015-10-26 11:12:23

我喜歡'bind'建議。 – DontVoteMeDown

如何在循環中添加onclick事件時添加唯一參數？

回答

相關問題