jquery - 用于连接选择器 jquery 的 for 循环

Question

当使用 for 循环连接 jquery 选择器时，我遇到了一小段 jquery 代码的奇怪问题:

不工作:

for(j = 1; j <= myHypervisors.length; j++)
{
    $("#status_vm" + j + "_dev").hide();
        $("#title_hypervisor_" + j).toggle(function(){
        $("#status_vm" + j + "_dev").show();
        $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
    },function(){
        $("#status_vm" + j + "_dev").hide();
        $("#show_hypervisor_" + j).toggleClass('icon-minus icon-plus'); 
    });
}//for

myHypervisors.length == 2

工作:

$("#status_vm1_dev").hide();
    $("#title_hypervisor_1").toggle(function(){
    $("#status_vm1_dev").show();
    $("#show_hypervisor_1").toggleClass('icon-plus icon-minus');
 },function(){
    $("#status_vm1_dev").hide();
    $("#show_hypervisor_1").toggleClass('icon-minus icon-plus');    
 });

$("#status_vm2_dev").hide();
    $("#title_hypervisor_2").toggle(function(){
    $("#status_vm2_dev").show();
    $("#show_hypervisor_2").toggleClass('icon-plus icon-minus');
 },function(){
    $("#status_vm2_dev").hide();
    $("#show_hypervisor_2").toggleClass('icon-minus icon-plus');    
 });

关于 DOM:

<h3 id="title_hypervisor_1"><i class="icon-plus" id="show_hypervisor_1"></i> Hypervisor : vm1-dev </h3>

<table class="table table-bordered" id="status_vm1_dev"></table>
...

预先感谢您的帮助

Answer 1

这是因为j发生了变化:当执行回调时，它的值是循环结束的值。您可以使用立即调用的函数来保护它:

for(j = 1; j <= myHypervisors.length; j++){
   (function(j){
    $("#status_vm" + j + "_dev").hide();
    $("#title_hypervisor_" + j).toggle(function(){
        $("#status_vm" + j + "_dev").show();
        $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
    },function(){
        $("#status_vm" + j + "_dev").hide();
        $("#show_hypervisor_" + j).toggleClass('icon-minus icon-plus'); 
    });
   })(j);
}

对于不喜欢循环创建函数的人，这里有另一个解决方案(作为奖励，它与最新版本的 jQuery 兼容):

for(j = 1; j <= myHypervisors.length; j++) $("#status_vm" + j + "_dev").hide();
$('[id^="title_hypervisor_"]').click(function(){
   var j = this.id.slice('title_hypervisor_'.length);
   $("#status_vm" + j + "_dev").toggle();
   $("#show_hypervisor_" + j).toggleClass('icon-plus icon-minus');
});