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");
    });
});

为什么removeClass（）和addClass（）不起作用？

1 个答案: