jquery - jsFiddle 说 jQuery 代码不正确，但在我的网站上仍然有效

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时，id#msg_alert就会通过在 class 中播放动画来显示.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 的 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 Report /*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, used:true, curly:true, browser:true, jquery:true, indent ：4，最大值：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");
});