2

非常に奇妙な JavaScript の動作が発生します。jQuery 1.9 と farbtastic カラー ピッカーを使用しています。

このコードが機能している間：

$('#colorpicker_1').hide();
$('#colorpicker_1').farbtastic('#color_1');
$('#colorbody_1').click(function(){$('#colorpicker_1').slideToggle()});

$('#colorpicker_2').hide();
$('#colorpicker_2').farbtastic('#color_2');
$('#colorbody_2').click(function(){$('#colorpicker_2').slideToggle()});

$('#colorpicker_3').hide();
$('#colorpicker_3').farbtastic('#color_3');
$('#colorbody_3').click(function(){$('#colorpicker_3').slideToggle()});

$('#colorpicker_4').hide();
$('#colorpicker_4').farbtastic('#color_4');
$('#colorbody_4').click(function(){$('#colorpicker_4').slideToggle()});

これは機能しません。なぜ機能しないのか、まったくわかりません。

var cstatusIDs = new Array();
cstatusIDs.push(1);
cstatusIDs.push(2);
cstatusIDs.push(3);
cstatusIDs.push(4);

for(var z=0; z < cstatusIDs.length; z++)
{
    var cstatus_id = cstatusIDs[z];

    console.log(cstatus_id); // outputs 1,2,3,4

    $('#colorpicker_'+cstatus_id).hide();
    $('#colorpicker_'+cstatus_id).farbtastic('#color_'+cstatus_id);
    $('#colorbody_'+cstatus_id).click(function(){$('#colorpicker_'+cstatus_id).slideToggle()});
}

何か案は？

4

1 に答える 1

3

問題は、cstatus_idクリック ハンドラーの範囲外で定義され、ループが実行されるたびにその値が変化することです。クリック ハンドラーはクリック イベントをトリガーするまで実際には評価されないため、その時点ではすべてのハンドラーが の最後の値を使用しますcstatus_id。

これを回避するには、ハンドラをクロージャでラップして、各インスタンスが独自の一意の ID を取得するようにします。

var cstatusIDs = [1, 2, 3, 4];

for(var z=0; z < cstatusIDs.length; z++)
{
    var cstatus_id = cstatusIDs[z];

    console.log(cstatus_id); // outputs 1,2,3,4

    $('#colorpicker_'+cstatus_id).hide();
    $('#colorpicker_'+cstatus_id).farbtastic('#color_'+cstatus_id);

    (function(id) {
        $('#colorbody_' + id).click( function() {
            $('#colorpicker_' + id).slideToggle()
        });
    })(cstatus_id)
}
于 2013-02-05T11:32:11.297 に答える