2013-12-18 138 views
0

我进口的#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++; 

}); 
+0

你为什么做这个复杂?您还可以使用事件委派单独分配单击事件。 – Hiral

回答

2

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

在你的情况下,解决办法很简单:既然你已经使用.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({ ... }); 
}); 
+0

该阵列服务于其他目的也这就是为什么我希望利用它为此目的以及...我编辑的问题,以澄清$(this)是克隆,因为我仍然没有得到响应点击... – user3024007

+0

好的,但重点是你不必使用数组(或'i')来引用克隆的元素。 –

+0

我现在得到了你。它实际上是你的第二个例子。我把我的#eleCopy连接到另一个动态创建的对象,它是那个必须被设置为$ copy的容器对象。感谢您的帮助和大量的参考。 – user3024007

0

为什么不:

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

each()

StartsWith

+0

是什么让你认为元素副本是同一父项的子项? –

1

这是一个范围问题。

当点击事件发生,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

+0

...我没有得到点击... – user3024007

+0

我会去你的参考,范围是我需要刷上。你的例子可能实际上已经仔细研究了我的代码的其他部分。谢谢 – user3024007

相关问题