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

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

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

---

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

您好，这非常简单您需要做的是

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
})
*/

函数ClickerFunction（）{
$（“body”）。在（“单击“，”.YourButton），函数（）上{
//这只会影响单击的元素
$（this.attr（“disabled”，true）；
});
}
$（文档）.ready（函数（）{
ClickerFunction（）；
});
/*
我认为创建一个全局计数器并在每个元素上递增它会更好*/
var GlobalCounter=0；
函数DynamicBuilder（）{
var stringBuilder=“”；
对于（var i=0；i

我将代码剥离到对按钮逻辑起作用的部分。我正在使用一个虚拟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');
    }
  });
}

---

这将为您提供预期的行为。

因此，将用户id的数据属性分配给按钮，然后使用该信息来操作正确的按钮？您需要将用户id分配给按钮，如@gforce301 suggered，或者不执行$（'.btnViewUser'）.attr（“禁用”，true）；您需要执行类似$（this.parent（）.find（'.btnViewUser'）.attr（“disabled”，true）的操作；根据上下文指定目标按钮。（由于我看不到您的html，我无法判断这是否有效，或者目标序列是什么）您在那里混淆了一些类。。你说的是

bg-danger

，但你的代码说的是

btn-danger

。我对它进行了编辑以保持一致。你的解决方案在小提琴上看起来不错。我离开电脑有一段时间了。我想这将解决我在JSFIDLE上给出的结果的问题。让我把这个应用到我的API中，我会写回结果。感谢所有做出贡献的人。我接受了@rodrigo的正确答案。当我将其应用于我的项目时，“检查用户”按钮没有单击。但我必须接受答案，因为在他发布的JSFIDLE上，它工作得很好，这是我想要实现的预期行为。至于我的项目，我不知道为什么在我添加这个答案时按钮不再点击，并且开发人员控制台中没有错误，至少可以指出可能存在错误的区域。“检查”按钮只是停止了单击。

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