我遇到了一种非常奇怪的 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()});
}
有什么想法吗?
最佳答案
问题是 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)
}
关于javascript - 奇怪的 JavaScript 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14706280/