Question

我正在导入#parentEle的子项，制作每个子项的副本并将该复制的对象推送到具有新ID的数组 - #eleCopy(i)

我正在尝试将click函数分配给导入的原始对象。单击它将更改其副本的CSS（从数组中引用）。但受影响的副本始终是相同的 - 最后一个加载。我希望通过数组中的索引号引用它...如何在click函数中“冻结”正确的数组引用，以便$(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

请参阅以下问题以解释问题：

在您的情况下，解决方案非常简单：由于您已经在使用.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

这是一个范围问题。

当点击事件发生并且ar[i].css({ ... })被执行时，i的值已经被所有对

的调用增加了

i++;

因此i等于#parentEle

的子女数量

为了获得所需的行为行为，请将代码包装在闭包中：

替换

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

与

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

有关javascript闭包的更多信息，see this answer

Answer 3

为什么不：

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

each()

StartsWith

为循环函数中的元素分配单击

3 个答案: