javascript - addEventListener 对所有事件显示相同的值

Question

所有，几个小时以来我一直在尝试不同的事情，但我无法解决这个问题，我有这个接受 JSON 的函数 -

我可以createElement('a'):很好我可以设置所有元素属性，例如href等:FINE我可以使用所需的元素 tags appendChild(a) :很好但我无法设置 a.addEventListener("click", function () {alert("clicked - "+ a.id) }, false); 每次我单击任何 href，它都会显示最后一个值

function setTags(tagsJson) {

    var obj = JSON.parse(tagsJson); 
    var a = null;
    var linkText = null; 
    for (var i = 0; i < obj.length; i++) {
        if (typeof (obj[i].Tag_name) === 'undefined' || obj[i].Tag_name === null) {
           // DO NOTHING
        }
        else
        {   a = document.createElement('a');
            linkText = document.createTextNode(obj[i].Tag_name);
            a.appendChild(linkText);            
            a.href = "#";               
            a.textContent = obj[i].Tag_name;
            a.className = "badge badge-success";                                      
            document.getElementById("tags").appendChild(a);

          // HERE IS THE ISSUE
            a.addEventListener("click", function () { alert("clicked - " + a.textContent) }, false); 

       }
     }
}

JSON 具有以下值的示例

{\"Tag_id\":12,\"Tag_name\":\"阿斯顿·马丁\"},{\"Tag_id\":13,\"Tag_name\":\"汽车\"} ]"}

它应该在 textContent 处附加独特的文本，例如“Aston Martin”、“Auston”和“Cars”，但单击任何项​​目时，更改将显示为 Cars尽管链接中的文本显示了正确的值。

根据上面的屏幕截图，我可以看到文本值很好，但 addEventListener 仅显示单击时的最后一个值

我想我缺少对addEventListener的理解？

如何解决这个问题

干杯

Answer 1

而不是 a.textContent使用this.textContent

a.addEventListener("click", function () { alert("clicked - " + this.textContent) }, false); 

当这个事件监听器执行时，for-loop已经执行到 i < obj.length很满意，这就是为什么a永远是最后一个。