2012-11-27 31 views
1

这是一个非常简单的问题/问题,我可以很容易地解决它,但是由于我在学习JavaScript,我非常渴望知道为什么这个特定问题正在发生。jQuery .click命令顺序

​​

这不起作用,因为我期望它。我希望它写入数组的当前内容,执行与某个函数名称相关联的简单动画,然后递增x。一切正常,除非它不增加x。

如果我这样做:

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

x被成功增加。

所以我的问题是,为什么会发生这种情况?

这里是一个的jsfiddle一个链接,我使用:http://jsfiddle.net/mxy6N/3/

+0

'var x = 0' - 您每次点击时都将“x”重新声明为零。 – ahren

+0

我不认为'x'在第二种情况下增加了... –

+0

我的不好,但是如果我在全局空间中定义x = 0,我的问题仍然存在。 – genuinelycurious

回答

5

好吧,如果你检查你的脚本控制台(F12为大多数的浏览器),你会看到functionlist[array[x]]()抛出一个错误是这样的:

Object has no method "smooch"

这是因为array[x]等于“接吻”,而且functionlist["smooch"]是不确定的,所以它的错误了它,它让你的x++之前。

其他的事情在这个代码怎么回事:

  • x被宣告你的函数里面,因此它在使用它的时间永远是0。
  • 即使它是在你的函数之外声明的,当你增加它的时候,它会用完你的数组中的项目。你需要在这里使用一个模数运算符。
  • 您没有引用具有$ .fn.transition定义的.js文件,因此您的转换调用也会出错。
  • flipflop都具有相同的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()检查。

+1

我很惊讶地看到F12在Chrome中也有效。我认为这是一个IE9专业。 –

+0

@jan - f12也适用于Firefox和Opera。 – gilly3

+1

这太棒了!谢谢分配。任何关于如何让代码实现数组的内容是否也是函数名称的提示或指示? (在那种情况下执行它)? – genuinelycurious