Jquery 如何为django模板中单个按钮的forloop中的按钮提供唯一id？

我试图通过在按钮id中添加post id为按钮提供一个唯一的id，我不明白如何在ajax函数中调用这个按钮id。我尝试的方式是错误的，所以当我点击按钮时，什么也不返回

发布列表模板：

{% csrf_token %}
     {% for post in object_list.all %}
     <div class="cardbox">
      <div class="cardbox-heading">
       <!-- START dropdown-->
       <div class="dropdown pull-right">
        <button class="btn btn-secondary btn-flat btn-flat-icon" type="button" data-toggle="dropdown" aria-expanded="false">
         <em class="fa fa-ellipsis-h"></em>
        </button>
        <div class="dropdown-menu dropdown-scale dropdown-menu-right" role="menu" style="position: absolute; transform: translate3d(-136px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
         <a class="dropdown-item" href="#">Hide post</a>
         <a class="dropdown-item" href="#">Stop following</a>
         <a class="dropdown-item" href="#">Report</a>
        </div>
       </div><!--/ dropdown -->
       <!-- END dropdown-->
       <div class="media m-0">
        <div class="d-flex mr-3">
         <a href="#"><img class="img-responsive img-circle" src="{{post.username.avatar.url}}" alt="User"></a>
        </div>
        <div class="media-body">
         <p class="m-0">{{post.username}}</p>
         <small><span>{{post.create_date|timesince}}</span></small>
        </div>
       </div><!--/ media -->
      </div><!--/ cardbox-heading -->
      <div class="cardbox-item">
       <a href="{% url 'posts:post_detail_final' pk=post.pk slug=post.slug %}" data-toggle="modal">
        <img class="img-responsive" src="{{post.image_data.url}}" alt="MaterialImg">
       </a> 
      </div><!--/ cardbox-item -->
      <div class="cardbox-base">
       <ul>
            {% for likes in post.likes.all %}
                <li ><a href="{% url 'profiles:detail' username=likes.username %}"><img src="{{likes.userprofile.avatar.url}}" class="img-responsive img-circle" alt="User"></a></li>
            {% endfor %}  
       </ul>
      </div><!--/ cardbox-base -->
        <div class="cardbox-like">
            <ul>
                <li>
                    <span class="" id="like_count{{post.id}}">{{post.likes.count}}</span>
                    <button class="btn btn-link text-dark p-0 border-0 btn-outline-light" id="like-button{{post.id}}" value="{{post.id}}">
                    <i class="fa fa-heart"></i>
                    </button>
                </li>
                <li><a href="{% url 'posts:post_detail_final' pk=post.pk slug=post.slug %}"> <i class="fa fa-comments"></i> <span>{{post.comments.count}}</span></a></li>
            </ul>
        </div><!--/ cardbox-like -->                  
     </div><!--/ cardbox -->
     {% endfor %}   

{%csrf\u令牌%}
{%用于对象_list.all%}
{{post.username}
{{post.create_date|timesince}}

{post.likes.all%中的likes为%s}

{%endfor%}



{{post.likes.count}



{%endfor%}

阿贾克斯

$（document）.on（'click'，'类似按钮{{{post.id}}），函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:“{%url”发布：如“%}”，
数据：{
postid:$（'#like按钮{{{post.id}}'）.val（），
csrfmiddlewaretoken:$（'input[name=csrfmiddlewaretoken]'）。val（），
行动:"邮政"
},
成功：函数（json）{
document.getElementById（“span[id^=like_count]”）。innerHTML=json['result']
},
错误：函数（xhr、errmsg、err）{
}
});
})

如果在评论会话中需要的代码多于告诉我的代码，我将用这些信息更新我的问题。

使用类：

。。。

然后

$（文档）。在（'click'，'like button'，函数（e）{
e、 预防默认值（）；
让post_id=$（this.val（）；
$.ajax({
键入：“POST”，
url:“{%url”发布：如“%}”，
数据：{
posted:post_id，
csrfmiddlewaretoken:$（'input[name=csrfmiddlewaretoken]'）。val（），
行动:"邮政"
},
成功：函数（json）{
//document.getElementById（“like_count”）.innerHTML=json['result']
$（“#like_count”+post_id）.html（json['result']）；
},
错误：函数（xhr、errmsg、err）{
}
});
})

---

在事件回调中，

$（this）

是

.like按钮

您单击过

您是否尝试过

$（文档）。在（'click'，'button[id^=like button]'

上，然后是

postid:$（this）.val（）

不，我没有尝试，你可以用你说的更改来编辑我的问题。我可以更改你的问题，但是其他人看不到你的原始代码，所以我不应该。应该很容易看到需要更改的内容。

$（文档）。on（'click'，'like button{{post.id}），函数（e）{

->

$（文档）。on（'click'、'button[id^=like button]'、函数（e）{

和

postid:$（'like button{{post.id}'）.val（）

->

postid:$（this.val（））

谢谢，这很好，但我也想给like_count提供不同的postid。你能告诉我like_count的情况吗？我怎样才能获得名为like_count和postid的span id，如代码所示，想在成功函数post中使用它吗？@AhmedYasin你的意思是这样吗？

成功：函数（json）{$(“#like_count”+post_id）.html（json['result']）；}，

其中var post_id是您用

let post_id=$（this.val（）；

定义的，我编辑了答案，在那里可读性更强

     <script>

 
  $(document).on('click', '#like-button{{post.id}}', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '{% url "posts:like" %}',
      data: {
        postid: $('#like-button{{post.id}}').val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        action: 'post'
      },
      success: function (json) {
        document.getElementById("span[id^=like_count]").innerHTML = json['result']
      },
      error: function (xhr, errmsg, err) {
      }
    });
  })
</script>