更新$.ajax之后的类数组

Update class array after $.ajax

本文关键字：数组 之后 ajax 更新      更新时间：2023-09-26

我有一个列表中的一组按钮，其中一些有disabled类。

我想做什么

当我单击非禁用按钮时，我想将禁用添加到所有按钮。完成ajax请求后，我想只有以前和点击按钮有一个disabled类。

我试着 

$(document).on('click', '.myButton', function (e) {
    /* Get this Button */
    var $btn = $(this);
    /* Get all disabled Buttons */
    var allDisabled = $('.disabled');
    /* Add disabled to all buttons */
    $('.buttonAction').addClass('disabled');
    /* Do Ajax Stuff */
    $.ajax({
       type: 'GET',
       ...
       success: function (data) {
           /* Remove all 'disabled' from Buttons */
           $('.buttonAction').removeClass('disabled');
           /* Add 'disabled' to this Button */
           $btn.addClass('disabled');
          /* Add 'disabled' to all previous Buttons */
          allDisabled.each(function(){
              $(this).addClass('disabled');
          });       
       },
       ...
   });
});

不幸的是，allDisabled.each函数将disabled分配给所有按钮。

我错在哪里?

您只能操作那些需要暂时禁用的按钮，而不是删除和添加所有对象的类:

$(document).on("click", ".my-button", function() {
    var $btn = $(this);
    var $disableDuringAjax = $(".buttonAction:not(.disabled)").addClass("disabled");
    $.ajax({
        type: 'GET'
    })
    .done(function (data) {
       $disableDuringAjax.removeClass("disabled");
       $btn.addClass('disabled');
    });
});

这样，disabled类将不会被切换两次按钮，这应该是不启用的。

相关文章：