JavaScript 函数仅捕获最后一个（元素）数据属性（django）

Question

我正在开发这个 Django 网络应用程序，我需要一个按钮来作为点赞按钮（发送好友请求） HTML 代码：

<div class="slideshow-container">
      {% for p in profiles %}
      <div class="profile-container">
              <div class ="left-div"> 
                  <div class="mySlides fade">
                    <img src="media/{{p.image}}" style="width:100%" id="user-media-img">
                    <div class="text">{{p.user_id}}</div>
                  </div>
              </div>
            <div class="right-div">
                <div class="details">
                    <h1>BIO</h1>
                    <p>{{p.bio}}</p>
                    <h1>Age:</h1><p>{{p.age}}</p>
                    <h1>Location:</h1><p>{{p.location}}</p>
                    <h1>Hobbies:</h1>
                    <p>{{p.hobbies}}</p>
                </div>
            </div>
      </div>
      <button class="btn2" onclick="sendFriendRequest(this)" id="like{{p.id}}" data-id="{{p.user_id}}">LIKE</button>
        {% endfor %}
  </div>

假设我有 3 个配置文件，因此 for 循环将为它运行 3 次，并将生成 3*(profile-container) divs*
问题这是data-id="{{p.user_id}}" 仅捕获最后一个配置文件的 {{p.user_id}} 不管我喜欢哪个配置文件！
我已经在静态 html 文件中尝试过这个代码工作正常，但在 django 中没有。

这是我的 JavaScript 代码：

<script type="text/javascript">
function sendFriendRequest(id){
    //var reqtype = $(this).attr("data-id");
    var reqtype = id.getAttribute("data-id");
    alert("Capture: " + reqtype);
    payload = {
      "csrfmiddlewaretoken": "{{csrf_token}}",
      "reciever_user_id": reqtype,
    }
    $.ajax({
      type:"POST",
      dataType:"json",
      url:"friend_request/",
      timeout: 5000,
      data: payload,
      success: function(data){
          console.log("Success:" + data)
          alert('data in to payload')
          if(data['response'] == "Friend Request Sent"){
              alert('Request Sent')
          }
          else if(data['response'] != null){
            alert(data['response'])
            alert('second')
          }
          else if(data['response'] == "Already Sent!"){
              alert('Request Already Sent!')
          }
          else {
            alert('what')
          }
      },
      error: function(data){
            alert("Something went wrong: " + data)
      },      
    })

  }
</script>

编辑 1：是的，有不同的 user_id，html 会根据 data-id 属性中的 user_id 生成不同的 div。

感谢您的帮助 谢谢！ :)

Answer 1

为什么不发送p.user_id 作为参数？

<button class="btn2" onclick="sendFriendRequest('{{p.user_id}}')" id="like{{p.id}}">LIKE</button>

在js中：

function sendFriendRequest(user_id){
...