Javascript在forE循环内设置动态变量在addEventListener中

时间:2013-11-08 09:52:56

标签: javascript

此代码对我很有用,但我需要侦听器中的两个变量是代表您单击的项目的动态数字。现在当然它们被硬编码为“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

干杯,

1 个答案:

答案 0 :(得分:1)

HTMLElementthis。索引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];
    });
});