Question

我将循环显示具有一个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>  
}

在这里循环将显示6个带有接受按钮的好友请求。

JavaScript代码：

var accept = document.querySelector('#accept');

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

当我单击向第一个朋友请求时，所有效果都很好，但其他按钮却不起作用。如何在每个按钮上正确使用我的代码？

Answer 1

使用类是因为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");
    }
});

Answer 2

ID应该是唯一的。没有两个元素应该具有相同的ID。

System.Xml.Linq

XDocument.Load("path")仅返回找到的第一个元素，您要使用的是var accept = document.querySelector('#accept');

如何更改许多具有一个ID的按钮类？

2 个答案: