Question

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

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

当单击特定用户的复选按钮时，将向服务器发送POST请求。在请求加载期间，应禁用所有按钮，启动请求的按钮应将其类别从bg-puple更改为bg-aqua 以及其文本从Check到Checking...。如果请求返回错误（由result表示，值为1），则按钮应将其类别从bg-aqua更改为bg-danger。如果没有错误，则类别应从bg-aqua更改为bg-navy，文本应从Checking...更改为User Okay。

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

这是我的代码：

$(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');
    }
  });
}

这应该给您预期的行为。

Answer 2

您好，这确实很容易

function TheClickerFunction(){
    $("body").on("click",".YourButton",function(){
    //this will only affect the clicked element 
    $(this).attr("disabled",true);
    });
}
$(document).ready(function(){
TheClickerFunction();
});
/*
i think creating a global counter and increment it on each element would b better*/
var GlobalCounter=  0;
function DynamicBuilder(){
var stringBuilder="";
for(var i = 0; i< lengthOfYourElement ; i++){
GlobalCounter+=1;
stringBuilder+="<input type='submit' id='myButton"+GlobalCounter+"'></input>";
}
$("body").append(stringBuidler);
}
in this way each time a click is made 
$(".yourClass").click(function(){
var elementID = $(this).attr("id");
//here you can do what ever you want with its id
})
*/

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

2 个答案: