Question

我试图将多个元素添加到列表中，并且每个元素应该在具有不同参数的click函数上执行相同的操作，问题是变量x gets始终包含列表中所有元素的相同值。 / p>

如何添加元素并使用其他参数调用onclick事件？

var addQuickLabelList =  function(txtList,ul) {


for (i = 0; i<txtList.length ; i++) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = document.createElement("a");        
        a.innerHTML = txtList[i];
        li.appendChild(a);

        var x = "#"+txtList[i];

        a.addEventListener("click", function(){
            y = x.clone();
            alert(x);
            } , false);// add

        $(ul).append(li);
    }
};

Answer 1

x始终获得相同的值，因为您的所有事件处理程序共享相同的var x变量。要将变量范围限定为块，请使用let（或const，如果它不会更改）而不是var。

或者您可以在.forEach()数组上使用txtList，以便var的范围限定为回调的调用。

var addQuickLabelList =  function(txtList,ul) {
    txtList.forEach(function(txtItem) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = li.appendChild(document.createElement("a"));        
        a.innerHTML = txtItem;

        var x = "#"+txtItem;

        a.addEventListener("click", function(){
            console.log(x);
        } , false);

        ul.appendChild(li);
    });
};

但你甚至不需要x变量。您已将文本设置为a的内容，因此您只需抓取该内容即可。这意味着你也可以重复使用这个更好的功能。

function handler() {
   console.log("#" + this.textContent);
}

var addQuickLabelList =  function(txtList,ul) {
    txtList.forEach(function(txtItem) {
        var li = document.createElement("li");
        li.setAttribute("data-icon", "false");

        var a = li.appendChild(document.createElement("a"));        
        a.innerHTML = txtItem;

        var x = "#"+txtItem;

        a.addEventListener("click", handler, false);

        ul.appendChild(li);
    });
};

使用onclick事件创建多个元素（列表）

1 个答案: