奇怪的JavaScript行为

我遇到了一个非常奇怪的JavaScript行为。我使用jQuery 1.9和farbtastic颜色选择器：奇怪的JavaScript行为

尽管此代码的工作：

$('#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()}); 
}

任何想法？

来源

2013-02-05 August-Daniell Meltzer von Lah

'怪异行为'和'不起作用'对于解决问题没有帮助。请准确描述什么是/不在发生什么以及你期望发生什么。 –

考虑使用类而不是id-s。 –

我描述为工作的第一个代码完全是它应该的。点击TD元素id = colorbody_n打开farbtastic颜色选择器。没有工作的例子（for循环）只使最后一个TD（id = 4）工作。虽然点击TD（1,2或3）总是打开TD ID 4 –

问题是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-05 11:32:11 nbrooks

完美！谢谢！ –

@八月没问题！请注意创建和填充数组的简写语法。 – nbrooks

奇怪的JavaScript行为

回答

相关问题