jquery - 请求仅适用于循环中的第一项？

Question

我已经编写了一个基本脚本，用于检测提交到我的网站(如 reddit)的链接的点赞按钮推送，在我的 View 中实例化一个函数并返回更新的点赞计数。代码的每一部分都工作正常，除了它只适用于模板中 for 循环中的第一项。我做错了什么，它不能捕获超过第一个元素？

我使用 jQuery 检测按钮按下的脚本如下所示:

<script>
$(document).ready(function() {
    $('#likes').click(function(){
        var link_id;
        link_id = $(this).attr("data-linkset_id")
        $.get('/uplink/', {linkset_id: link_id}, function(data){
            $('#vote_value').html(data);
            $('#likes').hide();
        });
    });
});
</script>

这是带有实际按钮的有问题的循环:

{% for link in linkset %}
{{link.url}}
<div id="vote_value">{{link.linklikes}}</div>
<button id ="likes" data-linkset_id="{{link.id}}" class="btn btn-mini btn-primary" type="button">like</button>
{% endfor %}

下面是我的 views.py 中的函数，它接受一个新链接对象并更改它的点赞数，然后返回更新后的整数:

def uplink(request):
    context = RequestContext(request)
    link_id = None
        if request.method == 'GET':
        link_id = request.GET['linkset_id']

    likes = 0
    if link_id:
        thelink = newlink.objects.get(id=int(link_id))
        if thelink:
            likes = thelink.linklikes + 1
            thelink.linklikes = likes
            thelink.save()

    return HttpResponse(likes)

非常感谢对此的任何帮助。

Answer 1

id 在页面上必须是唯一的。只有一个元素可以有特定的 id。将 id 属性和选择器更改为类或数据属性。

$(document).ready(function() {
    $('[data-role=like_container]').on('click', '[data-action=like_button]', function(e){
        var $like_container = $(e.delegateTarget);
        var $like_button = $(e.currentTarget);
        var $vote_value = $like_container.find('[data-role=vote_value]');
        var link_id = $like_button.data("linkset_id");
        $.get('/uplink/', {linkset_id: link_id}, function(uplink_response){
            $vote_value.html(uplink_response);
            $like_button.hide();
        });
    });
});

---

{% for link in linkset %}
<div data-role="like_container">
  {{link.url}}
  <div data-role="vote_value">{{link.linklikes}}</div>
  <button data-action="like_button" data-linkset_id="{{link.id}}" class="btn btn-mini btn-primary" type="button">like</button>
</div>
{% endfor %}