附加的效果数组元素

我试图连接所有jQuery UI的效果点击图片事件：附加的效果数组元素

var effectArray = [ 
    'blind','bounce','clip', 
    'drop','explode','fade', 
    'fold','highlight', 
    'puff','pulsate', 
    'scale','shake', 
    'slide','transfer' 
]; 

for(i=0;i<=effectArray.length-1;i++){ 
    $('#effects img').eq(i).click(function(event){ 
     console.log(effectArray); 
     console.log(i);   
     console.log(effectArray[i]); 
    // $(this).effect(effectArray[i]); 
    }); 
}

麻烦的是，

console.log(effectArray); 
console.log(i);

两个返回正确的值（数组和索引分别）但是：

console.log(effectArray[i]);

只是返回undefined。为什么是这样？

来源

2014-11-24 Matt Coady

我认为你需要在循环之外放置点击。演示http://jsfiddle.net/hgs6mpLc/ – Tasos 2014-11-24 21:30:12

这不完全是。每张照片都应该有不同的效果。当您点击第一张图片时，它会立即启动所有效果。 – 2014-11-24 22:37:42

我不认为你可以随时创建点击事件。你可以有一个随机效果每个点击演示 - http://jsfiddle.net/v22cLdta/ - 或者看看这里随机动画图像网格 - http://tympanus.net/codrops/2012/08/ 02 /动画响应图像电网/ – Tasos 2014-11-25 08:12:29

我认为这里的问题是当事件被调用时，我是effectArray.length。为了确保事件保持正确的索引，你需要使用JavaScript关闭：

for(i=0;i<=effectArray.length-1;i++) { 
    $('#effects img').eq(i).click((function() { var j = i; return function(event){ 
     console.log(effectArray); 
     console.log(j);   
     console.log(effectArray[j]); 
    // $(this).effect(effectArray[j]); 
    }); 
    })(); 
}

我还使用即时函数初始化关闭并返回函数处理器。

希望这有助于！

答：

来源

2014-11-27 02:48:20 Borgboy

附加的效果数组元素

回答

相关问题