ボタンを押すとDjango for-loopが複数回表示されます

Question

私はブログサイトの何かに取り組んできました。私はこれを持つindex.htmlを持っています：

{% for post in posts %} {% include "blog/featuredpost.html" %} {% endfor %} 

私はDjangoページネーションも使いました。 今、私が作りたいものは、再利用可能な好き嫌いのボタンです。これは、おそらく "blog/featuredpost.html"に入れたいと思っています。それは私がやったことです。

<div class="row"> 
<div class="col-sm-5"> 
    <div id="divLikes" class="col-sm-6 bg-success text-center"> 
     Likes: {{ post.likes }} 
    </div> 
    <div id="divDislikes" class="col-sm-6 bg-danger text-center text-block"> 
     Dislikes: {{ post.dislikes }} 
    </div> 
</div> 
{% if user.is_authenticated %} 
<div> 
    <div class="col-sm-2"> 
     <form id="like_form" action="" method="POST"> 
      {% csrf_token %} 
      <button id="like_button" type="submit" value="vote" class="btn btn-success btn-sm btn-block"> 
       <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Like 
      </button> 
     </form> 
    </div> 
    <div class="col-sm-2"> 
     <button type="button" class="btn btn-danger btn-sm btn-block"> 
      <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Dislike 
     </button> 
    </div> 
    <div class="col-sm-3"> 
     <button type="button" class="btn btn-warning btn-sm btn-block"> 
      <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Comment 
     </button> 
    </div> 
</div> 
{% endif %} 

---

<script type="text/javascript"> 
     //$('#like_button').click(function(){ }); 
/* The for cycle sends all the posts id that should appear on the page. 
It should send just the one on which the like button is clicked. */ 
$(document).on('submit', '#like_form', function(event) { 
event.preventDefault(); 
$.ajaxSettings.traditional = true; 
$.ajax({ 
    type: 'POST', 
    url: '{% url "like" %}', 
    dataType: 'json', 
    data: { 
     csrfmiddlewaretoken: '{{ csrf_token }}', 
     LikeId: {{ post.id }}, 
    }, 
    success: function(response) { 
     $('#divLikes').load(' #divLikes', function() { 
      /* It's important to add the space before #divLikes, I don't know why */ 
      $(this).children().unwrap() 
     }) 
    } 
}); 

}）

views.py

def view_like(request): 
# AJAX Like Button 
if request.user.is_authenticated: 
    if request.method == 'POST': 
     likepostId = request.POST.get('LikeId', '') 
     print(likepostId) 
     likepost = get_object_or_404(Post, id=likepostId) 

     print(likepost.title + " has " + str(likepost.likes)) 

     response_data = {} 
     return JsonResponse(response_data) 
else: 
    raise Http404 

return 200 

それだけで特定のものをプリントアウトしますので、私は現在、それを持っています。最初のページでは、実際にはAJAXの成功関数のためにhtml/cssの部分だけを複製しています。どのように私はクリックした特定の投稿に好きなものが欲しいということを具体的に知っているようなボタンを作るには？なぜなら、今のように、ページ上の他のすべての投稿のすべてのIDを特定の順序でスパムするからです。

Answer 1

問題は、同じID（#like_formと#like_button）を持つノードがたくさんあり、そのすべてにイベントを追加したことです。 idの値を持つ複数の要素を持つことはできません。 、formから属性idを削除classにbuttonのidを変更し、ポストのIDにその値を設定し、すなわち：

<button type="submit" value="{{ post.id }}" class="vote_button btn btn-success btn-sm btn-block"> 

、クラス.vote_buttonにイベントをフックし、その値を提出

番目：あなたは1

編集を投票ポストidenfityに（そうごajax要求でdata.LikeId$(event.target).val()のようなものになります） eのjavascriptはおおよそ次のようになります：

<script type="text/javascript"> 
$(".vote_button").click(function(event) { 
    event.preventDefault(); 
    $.ajaxSettings.traditional = true; 
    $.ajax({ 
     type: 'POST', 
     url: '{% url "like" %}', 
     dataType: 'json', 
     data: { 
      csrfmiddlewaretoken: '{{ csrf_token }}', 
      LikeId: $(event.target).val(), 
     }, 
     success: function(response) { 
      /* I am not sure what is this supposed to do 
       load() expects url as the first parameter, not a node 
      */ 
      $('#divLikes').load('#divLikes', function() { 
       $(this).children().unwrap() 
      }) 
     } 
    }); 
}); 
</script>