javascript - jQuery .click 命令顺序

标签 javascript jquery click

这是一个非常简单的问题,我可以很容易地解决它,但由于我正在学习 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/

最佳答案

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

Object has no method "smooch"

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

关于javascript - jQuery .click 命令顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13576014/

相关文章:

javascript - 当另一个开始时停止动画功能

javascript - JQuery:组合点击/触发元素以更高效地编写代码?

java - Android 工具栏菜单项点击

javascript - 为什么 WAV 格式在不同的浏览器中没有相同的 mimetype?

javascript - 在 Angular Controller 中将 Rails 日期时间更改为字符串

javascript - jquery.extend(true, [], obj) 不创建深拷贝

javascript - 在执行所有点击之前触发 jQuery 函数

javascript - Jquery Ajax POST 不工作。对于 GET 来说效果很好

javascript - Mocha bdd 风格测试命名

jquery - 如何检索在日期选择器上在 fullcalendar 上创建的事件以管理 symfony 中的约会?