奇怪的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行爲

回答

相關問題