篮子onclick处理程序

Question

我目前正在开发一个篮子，但似乎无法使clickHandler功能正常工作。当我按下一个按钮时，它将始终返回“data-id”为4.任何建议？这是一段代码和js小提琴。

basket.clickHandler = function(){
    var targets = document.getElementsByClassName("addButton");
    for(var i = 0; i < targets.length; i++) {
        var target = targets[i];
        target.onclick = function() {
            var shopId = target.getAttribute("data-id");
            var item = shop.items[shopId];

            basket.add(item);
        };
    };
};

http://jsfiddle.net/g1L5mwk4/

Answer 1

可以在此处找到问题的解释和一般解决方案：JavaScript closure inside loops – simple practical example

在您的特定示例中，您应该通过this引用元素本身，而不是循环变量：

var shopId = this.getAttribute("data-id");