在一个循环功能分配一个点击的元素

Question

我进口的#parentEle儿童，使每一个的副本，并推动该复制对象数组新ID - #eleCopy(i)

我想还可以指派一个点击函数导入原始对象。点击它会改变其副本的CSS（从数组引用）。但受影响的副本始终是相同的 - 最后一个加载。我希望通过它的索引号在数组中引用它......如何在点击函数中“冻结”正确的数组引用，这样$(this) 0将对应于ar [0]，$（this）`1到ar [ 1]等等？

var ar = []; 
var i = 0; 

$('#parentEle').children().each(function() { 

     ... // copy of $(this) is created: $('#eleCopy'+i) 

     ar.push($('#eleCopy'+i)); 


     $(this).on('click', function() { 

      ar[i].css({ ... }); 

     }); 

     i++; 

}); 

Answer 1

请参阅这些问题对于这个问题的解释：

• Assign click handlers in for loop
• JavaScript closure inside loops – simple practical example

在你的情况下，解决办法很简单：既然你已经使用.each ，没有必要保留一个外部计数器。当前索引传递给回调作为参数：

// method signature: each(function(index, Element)) 
$('#parentEle').children().each(function(i) { 
    ... // copy of $(this) is created: $('#eleCopy'+i) 
    ar.push($('#eleCopy'+i)); 

    $(this).on('click', function() { 
     ar[i].css({ ... }); 
    }); 
}); 

然而，问题是你是否甚至需要通过数组引用克隆。为了访问事件处理程序中的克隆，你可以参考它直接：

$('#parentEle').children().each(function(i) { 
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i) 
    $(this).on('click', function() { 
     $copy.css({ ... }); 
    }); 
}); 

这工作，因为你绑定的事件处理程序是关闭。

这两种解决方案的一个缺点是，您在每次迭代中创建一个新的事件处理程序，即使它们都执行相同的操作。你可以利用jQuery的.data API存储与原来的节点的参考克隆并绑定一个单一的事件处理程序的元素：

$('#parentEle').children().each(function(i) { 
    var $copy = ...; // copy of $(this) is created: $('#eleCopy'+i) 
    $(this).data('copy', $copy); 
}).on('click', function() { 
    $(this).data('copy').css({ ... }); 
}); 

Answer 2

为什么不：

$('#parentEle').find('[id^="eleCopy"]').each(function() { 
    $(this).css({ ... }); 
} 

each()

StartsWith

Answer 3

这是一个范围问题。

当点击事件发生，ar[i].css({ ... })执行，我已经已递增的所有调用

i++; 

值，以便i等于#parentEle

孩子的数量在为了具有所需的行为行为，将代码封装在闭包中：

替换

$(this).on('click', function() { 
    ar[i].css({ ... }); 
}); 

与

(function(i) { 
    $(this).on('click', function() { 
     ar[i].css({ ... }); 
    }); 
})(i); 

有关JavaScript的闭包的详细信息，see this answer