附加的效果數組元素

我試圖連接所有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

附加的效果數組元素

回答

相關問題