javascript - 为什么 jQuery 会出现此函数作用域错误？

Question

我有以下功能:

function updateStatuses() {
    $.each($('.status-badge'), function (i, value) {
        value.removeClass('badge-known');
    });
    $.post("/Diagnostics/Update", {  }, function(data) {
        $.each(data, function() {
            setStatus(this.Id, this.Infos, this.Errors, this.Warnings);
        });
    });
    window.setTimeout(function () {
        $.each($('.status-badge:not(.badge-known)'), function(i, value) {
            value.addClass('badge-unknown');
        });
    }, 1000);
}

基本上，我正在通过 AJAX 调用更新一组徽章。如果 1000 毫秒后，任何特定徽章尚未更新，它将获得 badge-unknown 类。

上面的函数是这样调用的:

$(function () { updateStatuses(); });

我的问题是 value.removeClass('badge-known'); 给出以下错误:

TypeError: value.removeClass is not a function

如果我注释掉该行，超时函数会在 value.removeClass('badge-unknown'); 上引发相同的错误

令人困惑的是，addClass和removeClass在setStatus中使用，它定义在上述函数的正下方。我在这里做错了什么？

Answer 1

调用标准 jQuery 方法时无需使用 .each。大多数此类方法都会愉快地直接迭代一组元素。

此外，主 document.ready 处理程序不需要匿名函数包装器:

你的整个代码可以是这样的:

function updateStatuses() {
    $('.status-badge').removeClass('badge-known');

    $.post("/Diagnostics/Update", {  }, function(data) {
        $.each(data, function() {
            setStatus(this.Id, this.Infos, this.Errors, this.Warnings);
        });
    });

    window.setTimeout(function () {
        $('.status-badge:not(.badge-known)').addClass('badge-unknown');
    }, 1000);
}

$(updateStatuses);