javascript - 为什么removeClass()和addClass()不起作用？

Question

我有一个 AJAX 调用将成功执行，但是当它到达 done() 部分时，它将打印出我的消息“SUCCESS”，但不会更改按钮的类。

$(".btn").click(function () {
    $.ajax({
        method: "POST",
        url: $(this).data("action"),
        data: {
            aId: $(this).data("a-id"),
            bId: $(this).data("b-id"),
            cId: $(this).data("c-id")
        }
    })
    .done(function () {
        console.log("SUCCESS");
        $(this).removeClass("btn-default");
        $(this).addClass("btn-success");
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert("FAILURE");
        $(this).removeClass("btn-default").addClass("btn-danger");
    });
});

我的猜测是，这与以下事实有关:我没有为函数提供要操作的按钮的 ID，而是对具有该类的任何被单击的内容进行操作“btn。”它源自的页面有一长串按钮，这就是为什么它们没有 ID，因为页面会给它们提供相同的 ID。我想我可以在 ID 上附加一个数字，但我不想这样做。它也没有解释为什么 $(this) 在检索值时在我的 AJAX 函数的其余部分中起作用。

Answer 1

$(this) 不是正确的this。尝试缓存该元素。

$(".btn").click(function () {
    var $btn = $(this);

    $.ajax({
        method: "POST",
        url: $(this).data("action"),
        data: {
            aId: $(this).data("a-id"),
            bId: $(this).data("b-id"),
            cId: $(this).data("c-id")
        }
    })
    .done(function () {
        console.log("SUCCESS");
        $btn.removeClass("btn-default");
        $btn.addClass("btn-success");
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert("FAILURE");
        $btn.removeClass("btn-default").addClass("btn-danger");
    });
});