2014-11-24 72 views
0

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

http://jsfiddle.net/jfv7qyff/1/

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。为什么是这样?

+0

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

+0

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

+0

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

回答

0

我认为这里的问题是当事件被调用时,我是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]); 
    }); 
    })(); 
} 

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

希望这有助于!

答: