javascript - 防止多次点击事件并更改目标值

Question

我的 UI 中包含表中的用户列表。每个条目/用户都有两个按钮。其中一个按钮是“检查”按钮。

<button type="submit" id="$id_from_db" class="bg-aqua btnCheckUser">Check</button>

当特定用户单击复选按钮时，POST 请求将发送到服务器。当请求加载时，所有按钮都应被禁用，启动请求的按钮应将其类从 bg-puple 更改为 bg-aqua 及其文本从 Check 到 Checking...。如果请求返回错误(由值为 1 的 result 指示)，则按钮应将其类从 bg-aqua 更改为 bg-危险。如果没有错误，类应从 bg-aqua 更改为 bg-navy，文本从 Checking... 更改为 用户好的。

我能够实现这一点，但它不仅会影响启动请求的按钮，还会影响所有按钮。

这是我的代码:

$(document).on("click", ".btnCheckUser", function() {
      var Item_Number = $(this).attr("Item_Number");
      /************************** MANIPULATE BUTTONS *******************************************************************************/
      $(this).removeClass('bg-purple').addClass('bg-aqua');
      $(this).html('Checking ...');
      $(this).attr("disabled", true);
      $('.btnViewUser').attr("disabled", true);
      /******************************* PROCESS AJAX **************************************************************************/
      var value = {
        Item_Number: Item_Number
      };
      $.ajax({
            url: "./plugins/serverside/CheckUserStatus",
            type: "POST",
            data: value,
            success: function(data, textStatus, jqXHR) {
                var data = jQuery.parseJSON(data);
                if (data.result == 1) {
                  $(this).removeClass('bg-aqua').addClass('bg-danger');
                  $("#CheckUser").html('Failed!');
                  $('.btnCheckUser').attr("disabled", false);
                  $('.btnViewUser').attr("disabled", false);
                  setTimeout(function() {
                    var table = $('#User_Table').DataTable();
                    table.ajax.reload(null, false);
                  }, 3500);
                } else if (data.result == 2) {
                  //------------------------ IF User Okay -------------------------------------------------------------------------------------------------------------------                 
                  $("#CheckUser").removeClass('bg-aqua').addClass('bg-navy');
                  $("#CheckUser").html('User Okay');
                  $('.btnCheckUser').attr("disabled", false);
                  $('.btnViewUser').attr("disabled", false);
                }

如何解决此问题并仅影响启动请求的按钮，但在加载请求时仍禁用所有按钮？

Answer 1

<强> JSFiddle

我将代码精简为对按钮逻辑重要的部分。我使用的是虚拟 API，并且随机生成结果值，因为我无法访问您正在使用的实际 API。

$(() => $('.btnCheckUser').on('click', ({ target }) => clickHandler(target)));

function clickHandler(button) {
  // Disable all buttons when one of them is clicked
  $('.btnCheckUser').prop('disabled', true);
  $('.btnViewUser').prop('disabled', true);

  // Remove all non standard classes, then add 'loading' class and text
  $(button).removeClass('bg-purple').removeClass('bg-navy').removeClass('bg-danger').addClass('bg-aqua');
  $(button).text('Loading...')

  $.ajax({
    url: 'https://reqres.in/api/users?delay=3',
    success: raw => {
      // Random result value
      const result = Math.random() > 0.5 ? 1 : 2;

      if (result === 1) {
        // Something went wrong, add 'danger' class and text
        $(button).addClass('bg-danger');
        $(button).text('Failed!')
      } else if (result === 2) {
        // Everything went fine, add 'success' class and text
        $(button).addClass('bg-navy');
        $(button).text('Success!');
      }
    },
    error: () => {
      // Add 'danger' class if something goes wrong
      $(button).addClass('btn-danger');
    },
    complete: () => {
      // Enable all buttons as we got a response
      $('.btnCheckUser').prop('disabled', false);
      $('.btnViewUser').prop('disabled', false);

      // Remove 'loading' class as we got a response
      $(button).removeClass('bg-aqua');
    }
  });
}

这应该会给你预期的行为。