javascript - Javascript 在 addEventListener 的 For 循环中设置动态变量

Question

这段代码对我很有用，但我需要侦听器中的两个变量是代表您单击的项目的动态数字。当然，现在它们被硬编码为“7”，但我所需要的只是让它们动态化。

var items = document.getElementsByClassName('largeItems');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        var itemWays = 7;
        var currentItem = 7;
        document.getElementById('display').src = detailsImage[itemWays];
    }, false);
}

我想我想要这样的东西：

var itemWays = this.items[i]; //this.itemIndex that was clicked
var currentItem = this.items[i]; //this.itemIndex that was clicked

干杯，

Answer 1

HTMLElement是this。_ 索引i有点难以捕获，因为它在 for 循环期间需要一大堆值。将其包装在一个函数中以“保存”其值将起作用。

var items = document.getElementsByClassName('largeItems');

for (var i = 0; i < items.length; i++) {
    (function(i) {
        items[i].addEventListener('click', function() {
            var itemWays = i;
            var currentItem = this;
            document.getElementById('display').src = detailsImage[itemWays];
        }, false);
    })(i);
}

如果您使用的不是 IE8 或更低版本，请执行

Array.prototype.forEach.call(document.getElementsByClassName('largeItems'), function(item, i) {
    item.addEventListener('click', function() {
        var itemWays = i;
        var currentItem = this;
        document.getElementById('display').src = detailsImage[itemWays];
    });
});