遍历数组和绑定事件答案

【问题标题】：Iterate through array and bind events遍历数组和绑定事件
【发布时间】：2014-04-01 17:13:43
【问题描述】：

我查遍了论坛，似乎找不到解决问题的方法。

我有一个 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();

谢谢

【问题讨论】：

我建议为所有这些添加一些类选择器（如.card），或使用[id^=box] 选择器
你的错是事件理解不正确（或 js 闭包）当事件触发时 targetID 已经被下一个循环迭代覆盖...

标签： jquery loops for-loop bind unbind

【解决方案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

【讨论】：

仅供参考：您现在有一个未定义的targetID
@vp_arth，我知道，我让作者知道，以便他更新他的答案。
这么简单的事情，我喜欢学习新东西。谢谢！

【解决方案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}) 
});

【讨论】：

@ShaneMcCarthy - 检查页面上的每个元素是否都有一个以 box 开头的 id 肯定效率较低。如果您想节省时间，只需使用 $(cards.join(',')).mouseenter ... 换取 3 个字符以获得更高效率的选择。
啊，是的，我没想到。好点，看起来我会坚持你的例子。感谢您的帮助特拉维斯。