使用onclick事件創建多個元素（列表）

Question

我正在嘗試將多個元素添加到列表中，並且每個元素應使用不同的參數執行相同的click函數，問題是變量x始終對列表的所有元素包含相同的值。

如何添加元素並使用其他參數調用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 。

或者，您可以在txtList數組上使用.forEach() ，以便將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);
    });
};