如何为 django 模板中的单个按钮的 for 循环中的按钮提供唯一 id？

Question

我试图通过在按钮 ID 中添加帖子 ID 来为按钮提供唯一 ID，但我不明白如何在 ajax 函数中调用此按钮 ID。我尝试做的方式是错误的，所以当我点击按钮时什么都不返回。

postlist 模板：

{% 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 %}   

阿贾克斯

     <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>

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

Answer 1

使用类：

<button class="like-button" value="{{post.id}}" ...>...</button>

然后

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

在事件回调中，$(this) 是您点击的.like-button