Javascript 如何更改一个id的多个按钮类？

我将通过循环where have按钮来显示好友请求，以接受具有一个id的好友请求

HTML代码：

foreach($friendRequests as $request) {
    <div class="alert alert-warning" role="alert">
      {{$request['userName']}} send to you friend request. 
      <button type="button" class="btn btn-warning pull-right" value="{{ $request->senderId }}" id="accept">Accept</button>
    </div>  
}

---

当我单击“第一个朋友请求”时，所有按钮都正常工作，但其他按钮不起作用。如何在每个按钮上正确使用代码？

ID应该是唯一的。任何两个元素都不应具有相同的ID

var accept=document.querySelector（'#accept'）

querySelector
只返回它找到的第一个元素，您要使用的是
document.querySelectorAll（'.accept按钮'）
ID应该是唯一的。任何两个元素都不应具有相同的ID

var accept=document.querySelector（'#accept'）

querySelector
只返回它找到的第一个元素，您要使用的是
document.querySelectorAll（'.accept按钮'）
使用类，因为ID用于唯一性。您已经包含了jquery，为什么不使用它呢

$(document).on('click','.accept', function(){
    if(this.classList.contains("btn-warning") == true) {
        this.classList.remove("btn-warning");
        this.classList.add("btn-success");
    } else if (this.classList.contains("btn-success") == true) {
        this.classList.remove("btn-success");
        this.classList.add("btn-warning");
    }
});

使用类，因为ID用于唯一性。您已经包含了jquery，为什么不使用它呢

$(document).on('click','.accept', function(){
    if(this.classList.contains("btn-warning") == true) {
        this.classList.remove("btn-warning");
        this.classList.add("btn-success");
    } else if (this.classList.contains("btn-success") == true) {
        this.classList.remove("btn-success");
        this.classList.add("btn-warning");
    }
});

querySelector（）只在页面中查找第一个匹配的选择器，并且添加到该ID的值在页面中必须是唯一的。改为使用类。
id
属性为HTML元素指定一个
unique
id（该值在HTML文档中必须是唯一的）。你应该使用
class
属性而不是ID。一个类名可以被多个元素使用。我必须如何重写我的javascript代码？我必须使用什么来代替查询选择器（）
？我可以在哪里使用
id
更改单击的按钮类，或者如何检测单击的按钮@charlietfl注意到，通过使用和ID，它（通常）获取具有该ID的第一个元素，而不是像您期望的那样获取对象数组querySelector（）只在页面中查找第一个匹配的选择器，并且添加到该ID的元素在页面中必须是唯一的。改为使用类。
id
属性为HTML元素指定一个
unique
id（该值在HTML文档中必须是唯一的）。你应该使用
class
属性而不是ID。一个类名可以被多个元素使用。我必须如何重写我的javascript代码？我必须使用什么来代替查询选择器（）
？我可以在哪里使用
id
更改单击的按钮类，或者如何检测单击的按钮@charlietfl注意到，通过使用和ID，它（大多数情况下）获取具有该ID的第一个元素，而不是您所期望的对象数组