如何在循环期间添加onclick事件时添加唯一参数

How do I add an unique argument when adding onclick events during a loop?

本文关键字：添加 onclick 事件 唯一 参数 循环      更新时间：2023-09-26

我要做的是使用参数在每个按钮上添加一个唯一的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);
}

I've try 

li.onclick = purchase(i);

和

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

您有几个选择。您可以为处理程序创建一个变量来关闭它，它不会改变(如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)。

在li创建循环中试试:

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

在purchase事件:

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

更多关于数据属性(dataset)的信息。

相关文章：