Question

我无法更正此代码，因为我对jQuery的经验很少：

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop")
    }, 2000);
});

问题是，当我使用“错误的代码”时，我的目标是效果。

此脚本是我重新启动CSS3动画的解决方法。每当用户点击ID #button时，通过在类#msg_alert中播放动画来显示id .msg_play。动画持续两秒钟;因此，脚本的下一部分有两秒的延迟，它基本上将id＃msg_alert切换回class.msg_stop。

我尝试按照jsFiddle返回的错误警告，但在相应地更改代码后，脚本停止工作。（虽然实际上，当我在纠正前两个错误后再次运行jslint时，我得到更多错误，所以我一直纠正它们，直到jsFiddle告诉我我的代码无效。

Answer 1

我没有看到你的代码有多大错误，链接到小提琴会很有帮助。但是，我确实有一些建议。首先，使用计时器变量来防止多次单击问题。就这样：

var tmrMsgPlay;
$("#msg-button").click(function(e) {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop");
    }, 2000);
});

第二个建议是将msg_alert设置为已经有类msg_stop，然后使用jQuery's toggleClass，如下所示：

//  preset msg_alert to have class 'msg_stop' at start, then use toggleClass
var tmrMsgPlay;
$("#msg-button").click(function(e) {
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    $("#msg_alert").toggleClass("msg_play msg_stop");
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").toggleClass("msg_play msg_stop");
    }, 2000);
});

Answer 2

JSHint报告 / * jshint forin：true，noarg：true，noempty：true，eqeqeq：true，bitwise：true，strict：true，undef：true，unused：true，curly：true，browser：true，jquery：true，indent：4 ，maxerr：50 * /

错误：

第4行：$（“＃msg_alert”）。removeClass（“msg_play”）。addClass（“msg_stop”）缺少分号。

Answer 3

请改为尝试：

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play").delay(2000).removeClass("msg_play").addClass("msg_stop");
});

jsFiddle说jQuery代码不正确但仍可在我的网站上运行

3 个答案: