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

Posted 2023-02-24

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

【英文标题】：How to provide unique id to the button in a forloop to the single button in django templates?

【发布时间】：2021-02-16 02:04:57

【问题描述】：

我试图通过在按钮 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" ></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" >
       </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" ></a></li>
            % endfor %  
       </ul>
      </div><!--/ cardbox-base -->
        <div class="cardbox-like">
            <ul>
                <li>
                    <span class="" id="like_countpost.id">post.likes.count</span>
                    <button class="btn btn-link text-dark p-0 border-0 btn-outline-light" id="like-buttonpost.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-buttonpost.id', function (e) 
    e.preventDefault();
    $.ajax(
      type: 'POST',
      url: '% url "posts:like" %',
      data: 
        postid: $('#like-buttonpost.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>

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

【问题讨论】：

你试过$(document).on('click', 'button[id^=like-button]'然后postid: $(this).val()

不，我没有尝试，您可以使用您所说的更改来编辑我的问题。

我可以更改您的问题，但其他人看不到您的原始代码，所以我不应该。应该很容易看出需要更改的内容。 $(document).on('click', '#like-buttonpost.id', function (e) -> $(document).on('click', 'button[id^=like-button]', function(e) AND postid: $('#like-buttonpost.id').val() -> postid: $(this).val()

谢谢这工作正常，但我也想给 like_count 不同的 postid

【参考方案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

【讨论】：

你能告诉我like_count，我怎样才能得到名字like_count和postid的span id，如代码所示，想在成功函数帖子中使用它，我能得到吗？跨度>

@AhmedYasin 你的意思是这样吗？ success: function (json) $("#like_count" + post_id).html(json['result']); , 其中 var post_id 是您使用 let post_id = $(this).val(); 定义的那个我编辑了答案，那里更具可读性