jquery之为什么我的投票按钮只适用于第一篇文章

我按照 tangowithdjango 中的说明进行操作在我的论坛应用程序中添加“喜欢”按钮。

html 文件和 javascript:

<script> 
$(document).ready(function(){ 
  $("#upvote").click(function(){ 
    var postid; 
    postid = $(this).attr("data-r-id"); 
    $.get('/upvote/', {post_id: postid}, function(data){ 
               $('#like_count').html(data); 
               
    }); 
  }); 
}); 
</script>

<a id="upvote" data-r-id="{{r.id}}" class="label-info label pull-right">赞<div id="like_count">{{r.upvotes}}</div></a>

View .py

def upvote(request): 
    post_id = None 
    if request.method == 'GET': 
        post_id = request.GET['post_id'] 
    votes = 0 
    if post_id: 
        p = post.objects.get(id=post_id) 
        if p : 
            votes = p.upvotes + 1 
            p.upvotes = votes 
            p.save() 
    return HttpResponse(votes) 

网址.py

urlpatterns = patterns( 
    url(r'^upvote/$', 'upvote', name='upvote'), 
) 

当点击#upvote 按钮时，#like_count 增加一。但是，它仅适用于第一篇文章。如果我点击其余的帖子，我根本得不到任何回应。

请您参考如下方法:

我建议您将 upvote 作为类而不是 id，因为 id 引用文档中的唯一元素。

$(document).ready(function(){ 
  $(".upvote").click(function(){ 
    var postid; 
    postid = $(this).attr("data-r-id"); 
    $.get('/upvote/', {post_id: postid}, function(data){ 
               $('#like-count-' + postid).html(data); 
 
    }); 
  }); 
}); 

你的 html 应该是这样的，

<a data-r-id="{{r.id}}" class="label-info label pull-right upvote">赞<div id="like-count-{{r.id}}">{{r.upvotes}}</div></a>