jQuery .click命令順序

這是一個非常簡單的問題/問題，我可以很容易地解決它，但是由於我在學習JavaScript，我非常渴望知道爲什麼這個特定問題正在發生。jQuery .click命令順序

這不起作用，因爲我期望它。我希望它寫入數組的當前內容，執行與某個函數名稱相關聯的簡單動畫，然後遞增x。一切正常，除非它不增加x。

如果我這樣做：

$("#go").click(function() { 
    $("p").append(array[x] + " ") 
    //functionlist[array[x]]() 
    x++ 
})

x被成功增加。

所以我的問題是，爲什麼會發生這種情況？

這裏是一個的jsfiddle一個鏈接，我使用：http://jsfiddle.net/mxy6N/3/

來源

2012-11-27 genuinelycurious

'var x = 0' - 您每次點擊時都將「x」重新聲明爲零。 – ahren

我不認爲'x'在第二種情況下增加了... –

我的不好，但是如果我在全局空間中定義x = 0，我的問題仍然存在。 – genuinelycurious

好吧，如果你檢查你的腳本控制檯（F12爲大多數的瀏覽器），你會看到functionlist[array[x]]()拋出一個錯誤是這樣的：

Object has no method "smooch"

這是因爲array[x]等於「接吻」，而且functionlist["smooch"]是不確定的，所以它的錯誤了它，它讓你的x++之前。

其他的事情在這個代碼怎麼回事：

x被宣告你的函數裏面，因此它在使用它的時間永遠是0。
即使它是在你的函數之外聲明的，當你增加它的時候，它會用完你的數組中的項目。你需要在這裏使用一個模數運算符。
您沒有引用具有$ .fn.transition定義的.js文件，因此您的轉換調用也會出錯。
flip和flop都具有相同的rotateY值，所以一旦「翻轉」，它不會「翻牌」

下面是一些可能做你要找的事：http://jsfiddle.net/g5mJd/3/

和更新的代碼：

var array = ["smooch", "jab", "flip"]; 
var move = "flip"; 
var x = 0; 
var functionlist = { 
    flip: function() { 
     $("#block").transition({ 
      perspective: '0px', 
      rotateY: '180deg' 
     }, 1000); 
    }, 
    flop: function() { 
     $("#block").transition({ 
      perspective: '0px', 
      rotateY: '0deg' 
     }, 100); 
    } 
}; 


$("#go").click(function() { 
    var functionName = (x % 2 == 0) ? 'flip' : 'flop'; 
    var fn = functionlist[functionName]; 
    if($.isFunction(fn)) { 
     fn(); 
    } 
    var say = array[x % array.length]; 
    $('p').append(say + ' '); 
    x++; 
});

編輯：已更新$.isFunction()檢查。

來源

2012-11-27 01:27:16

我很驚訝地看到F12在Chrome中也有效。我認爲這是一個IE9專業。 –

@jan - f12也適用於Firefox和Opera。 – gilly3

這太棒了！謝謝分配。任何關於如何讓代碼實現數組的內容是否也是函數名稱的提示或指示？（在那種情況下執行它）？ – genuinelycurious

jQuery .click命令順序

回答

相關問題