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

WORKING：

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

一个for循环来连接选择器jquery

1 个答案: