jQuery .click命令

Question

这是一个非常简单的问题/问题,我可以轻松地解决它,但是因为我正在学习javascript,所以我非常渴望知道为什么这个特殊问题正在发生.

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

这不像我期望的那样有效.我希望它能够编写数组的当前内容,执行与某个函数名相关联的简单动画,然后递增x.一切正常,除了它不增加x.

如果我这样做:

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

x成功递增.

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

这是我正在使用的jsfiddle的链接:http://jsfiddle.net/mxy6N/3/

Answer 1

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

对象没有方法"smooch"

这是因为array[x]它等于"smooch",并且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()检查.