Javascript Onclick函数更改为所有更改元素的相同函数

我试图做的是基于通过AJAX获得的数据，我正在改变页面上的某些元素，使之不同。简化版本如下：

例如：

HTML:

其结果是两个元素均为“Greg”，而不是相应的值

---

我们将非常感谢您对答案的任何提示D

您需要创建一个闭包，否则，

.click（）

处理程序将始终提醒循环中最后分配的

友元

的值，因为它们只有对该变量的引用

function callback() {
    var data_received = [["1","1","Andy"], ["1","5","Greg"]];
    for (var friend in data_received) {
        if (data_received[friend][0] == undefined) continue;

        var friend_id = '#'+ data_received[friend][0] +'-'+ data_received[friend][1];
        console.log(friend_id);
        $(friend_id).attr('onclick', '');
        $(friend_id).css('background', 'red');
        (function() {
            var savedValue = data_received[friend][2];
            $(friend_id).click(function(){
                alert(savedValue);
            });
        })();
    }    
}​

---

您需要创建一个闭包，否则，

.click（）

处理程序将始终提醒循环中最后分配的

朋友的值，因为他们所拥有的只是对该变量的引用

function callback() {
    var data_received = [["1","1","Andy"], ["1","5","Greg"]];
    for (var friend in data_received) {
        if (data_received[friend][0] == undefined) continue;

        var friend_id = '#'+ data_received[friend][0] +'-'+ data_received[friend][1];
        console.log(friend_id);
        $(friend_id).attr('onclick', '');
        $(friend_id).css('background', 'red');
        (function() {
            var savedValue = data_received[friend][2];
            $(friend_id).click(function(){
                alert(savedValue);
            });
        })();
    }    
}​

首先，您不应该在HTML中使用内联事件处理程序。相反，使用jQuery附加它们

您的问题在于闭包-
friend
在
回调中具有函数作用域。事件处理程序在
friend
变量上创建一个闭包。当
callback
完成时，
friend==1
。然后，事件处理程序使用此值。修复方法是使用
$。每个
迭代数组，这将创建变量值的闭包

HTML
首先，您不应该在HTML中使用内联事件处理程序。相反，使用jQuery附加它们

您的问题在于闭包-
friend
在
回调中具有函数作用域。事件处理程序在
friend
变量上创建一个闭包。当
callback
完成时，
friend==1
。然后，事件处理程序使用此值。修复方法是使用
$。每个
迭代数组，这将创建变量值的闭包

HTML
您缺少了一些
var
s:）这不是问题所在，只是匆匆将其编码以显示问题所在。尽管如此，乔还是找到了解决办法。：）您缺少了一些
var
s:）这不是问题所在，只是匆匆将其编码以显示问题所在。尽管如此，乔还是找到了解决办法。：）什么地方？这不是问题所在。@Eric：你说得对，我已经修改了我的答案以反映真实问题。哈，你太快了！我知道我错过了什么！什么地方？这不是问题所在。@Eric：你说得对，我已经修改了我的答案以反映真实问题。哈，你太快了！我知道我错过了什么！
function callback() {
    var data_received = [["1","1","Andy"], ["1","5","Greg"]];
    for (var friend in data_received) {
        if (data_received[friend][0] == undefined) continue;

        var friend_id = '#'+ data_received[friend][0] +'-'+ data_received[friend][1];
        console.log(friend_id);
        $(friend_id).attr('onclick', '');
        $(friend_id).css('background', 'red');
        (function() {
            var savedValue = data_received[friend][2];
            $(friend_id).click(function(){
                alert(savedValue);
            });
        })();
    }    
}​

<ul id="friends">
    <li id="1-1"> Andy </li>
    <li id="1-2"> Paul </li>
    <li id="1-3"> Saul </li>
    <li id="1-4"> Rita </li>
    <li id="1-5"> Greg </li>
</ul>

<input type="button" id="go" value="Go!" />

$('#friends').on('click', 'li', function() {
    alert('...');
});

$('#go').on('click', function() {
    var data_received = [["1","1","Andy"], ["1","5","Greg"]];
    $.each(data_received, function(i, friend) {
        if (friend[0] === undefined) return;

        $('#'+ friend[0] +'-'+ friend[1])
            .css('background', 'red');
            .click(function() { 
                alert(friend[2]);
                return false;
            });
    });
});