迭代数组并绑定事件

Question

我已经通过论坛查看了，似乎找不到解决我问题的方法。

我有一个id的数组，我正在通过for循环迭代添加鼠标事件进入和离开。 但是事件都绑定到最终ID，这可能是每个问题的一个。

我把它放在下面的小提琴上，任何帮助都会受到赞赏 - 我的大脑今天有点疲惫。

http://jsfiddle.net/shanemccster/e48vu/4/

cards = new Array('#box0','#box1','#box2');
function bindCardEvents(){
    for (var i=0; i<cards.length; i++){
        var targetID = '#'+$(cards[i]).attr('id');
        $(targetID)
            .mouseenter(function() {
                TweenMax.to(targetID,0.3, {opacity:0.5} )
            }).mouseleave(function() {
                TweenMax.to(targetID,0.3, {opacity:1}) 
            }); 
    }
}
bindCardEvents();

由于

Answer 1

你不必迭代。您可以使用

   $("[id^=box]")
        .mouseenter(function() {
            TweenMax.to(this,0.3, {opacity:0.5} )
        }).mouseleave(function() {
            TweenMax.to(this,0.3, {opacity:1}) 
        }); 

它会将事件绑定到id以box

开头的所有元素

Demo

Answer 2

的 jsFiddle Demo 的

您可以将{id}与,一起加入，按惯例将选择器添加到jQuery中的集合中。执行此操作后，您可以将事件分配给这些选择器返回的集合。每个事件都可以访问当前元素this。 TweenMax.to需要选择器或元素，因此您可以将this传递给函数，而无需手动构建id选择器。

var cards = new Array('#box0','#box1','#box2');
var cardSelector = cards.join(",");
function bindCardEvents(){
  $(cardSelector).mouseenter(function() {
    TweenMax.to(this,0.3, {opacity:0.5} )
  }).mouseleave(function() {
    TweenMax.to(this,0.3, {opacity:1}) 
  });
}
bindCardEvents();

为简洁起见，这也可行

$(cards.join(",")).mouseenter(function() {
    TweenMax.to(this,0.3, {opacity:0.5} )
  }).mouseleave(function() {
    TweenMax.to(this,0.3, {opacity:1}) 
});