Question

我有一堆div，当它们被点击时，我想更新一些与之关联的数据。我在div中注册了一个click事件，但是我无法弄清楚如何将数据传递给click事件处理程序。我已经查看了其他一些类似的SO问题但尚未找到可行的解决方案。

我希望基本上能够点击一个框并随之传递数字：

var numbers = ['one', 'two', 'three', 'four'];
var container = document.getElementById('container');

for (var i = 0; i < numbers.length; i++){    
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    var save = function(){
        console.log(numbers[i]);
    }
    $(checkbox).click(function(){
        save();
    });
    container.appendChild(checkbox);
}

http://jsfiddle.net/1qrvxe1j/

Answer 1

您可以使用JQuery .each来遍历数组。

$.each(numbers, function(index, num) {
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    $(checkbox).click(function(){
        console.log(num);
    });
    container.appendChild(checkbox);
});

Answer 2

你必须使用闭包......尝试他的代码。

var numbers = ['one', 'two', 'three', 'four'];
var container = document.getElementById('container');

var save = function (arg1) {
    console.log(arg1);
}

var clickEvent = function (i) {
    return function () {
        save(numbers[i]);
    };
}

for (var i = 0; i < numbers.length; i++){    
    var checkbox = document.createElement('div');
    checkbox.setAttribute('class','checkBtn');

    $(checkbox).click(clickEvent(i));

    container.appendChild(checkbox);
}

使用jquery单击事件发送额外变量

2 个答案: