0

私がやろうとしているのは、AJAX 経由で取得したデータに基づいており、ページ上の特定の要素を異なるものに変更しています。簡略化されたバージョンは次のとおりです。

例：

HTML:

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

<input type="button" onclick='callback()' value="Go!" />

関連する JS: function alert_this(value) { alert(value); }

function dont_alert() {
    alert('...');
}

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

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

この結果、両方の要素が適切な値ではなく「Greg」を警告します。

答えに向けた製品は非常に高く評価されます! :D

4

2 に答える 2

4

クロージャーを作成する必要があります。そうしないと、.click()ハンドラーは常にループで最後に割り当てられた値を警告します。これは、この変数への参照しかないためです。friend

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);
            });
        })();
    }    
}​

デモ。

于 2012-08-31T12:10:22.933 に答える
0

まず、HTML でインライン イベント ハンドラーを使用しないでください。代わりに、jQuery を使用してそれらを添付してください。

あなたの問題はクロージャーにあります -friend内に関数スコープがありますcallback。イベント ハンドラーは、friend変数にクロージャーを作成します。callback終了したら、friend == 1. その後、イベント ハンドラーはこの値を使用します。修正は$.each、配列を反復するために使用することです。これにより、変数の値にクロージャーが作成されます。

HTML

<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!" />

JS

$('#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;
            });
    });
});
于 2012-08-31T12:24:25.510 に答える