なぜ私のupvoteボタンは、最初の投稿のためにのみ動作しますか？

Question

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>

views.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) 

urls.py

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

WHE n #upvoteボタンをクリックすると、#like_countが1ずつ増加します。しかし、それは最初の投稿のためだけに機能します。私が残りの投稿をクリックすると、私は全く応答しません。

Answer 1

idがドキュメント内の一意の要素を参照するため、upvoteをクラス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>