爲什麼我的按鈕只能在Django的列表的第一個實例上工作？

Question

我遵循Tango和Django的教程來添加類似按鈕。我認爲它的工作，但它似乎只爲列表中的第一個模型實例工作。你看，我有一個視圖，其中顯示了列表中的所有對象。我的代碼如下所示：

views.py

def content_list(request): 
    posts = Post.objects.all() 
    return render(request, 'app/content_list.html', {'posts' : posts}) 

models.py

class Post(models.Model): 
    user = models.ForeignKey(User, related_name = 'user_posts') 
    title = models.CharField(max_length = 140) 
    votes = models.IntegerField(default = 0) 

content_list.html - 模板

{% for post in posts %} 
    <h1>{{post.title}}</h1> 
    <p><strong id="like_count">{{post.votes}}</strong> points</p> 
    {% if request.user.is_authenticated %} 
     <button id="likes" data-post-id="{{post.id}}" class="btn btn-purple" type="button"> 
      <span>Upvote</span> 
     </button> 
    {% endif %} 
{% endfor %} 

在views.py，我有處理後的喜好另一個功能：

@login_required 
def like_post(request): 
    post_id = None 

    # Getting the id of the post from the template 
    if request.method == 'GET': 
     post_id = request.GET['post_id'] 

    likes = 0 

    if post_id: 
     post = Post.objects.get(id = int(post_id)) 
     if post: 
      likes = post.votes + 1 
      post.votes = likes 
      post.save() 

    return HttpResponse(likes) 

最後，來完成實際的工作我的AJAX文件：

$('#likes').click(function(){ 
    var p_id; 
    p_id = $(this).attr("data-post-id"); 
    $.get('/like_post/', {post_id: p_id}, function(data){ 
     $('#like_count').html(data); 
     $('#likes').hide(); 
    }); 
}); 

我urls.py我的應用程序文件夾中含有URL模式下面一行：

# Liking a post 
url(r'^like_post/$', views.like_post, name='like_post'), 

我缺少什麼？其他帖子的連根按鈕也不會隱藏，因爲我的ajax代碼，它們應該是這樣。我該如何解決這個問題？

謝謝！

Answer 1

通過應用什麼在評論mentionned，您的服務器代碼將變成：

{% for post in posts %} 
    <h1>{{post.title}}</h1> 
    <p><strong id="like_count">{{post.votes}}</strong> points</p> 
    {% if request.user.is_authenticated %} 
     <button data-post-id="{{post.id}}" class="likes btn btn-purple" type="button"> 
      <span>Upvote</span> 
     </button> 
    {% endif %} 
{% endfor %} 

現在的JavaScript部分是：

$('.likes').click(function(){ 
    var p_id; 
    p_id = $(this).attr("data-post-id"); 
    $.get('/like_post/', {post_id: p_id}, function(data){ 
     $('#like_count').html(data); 
     $(this).hide(); 
    }); 
});