Question

我编写了一个基本脚本，用于检测提交到我的网站的链接（如reddit）的类似按钮，在我的视图中实例化一个函数并返回更新的类似计数。代码的每个部分都可以正常工作，除了它只适用于模板中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中的函数，它接受一个newlink对象并更改它的count然后返回更新的整数：

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 %}

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

1 个答案: