按钮更新第一个元素的文本而不是选定元素

Question

当我选择“喜欢”按钮时，按钮会正确更新。但是，“喜欢计数”仅更新第一张图像的计数，而不是我选择的图像。

有什么想法可以像按钮一样只更新所选图像的点赞数吗？

提前谢谢你！

html：

{% for photo in photos %}
    <img src="{{ photo.get_photo_url }}" />
    <input class="like_btn" photo="{{ photo.pk }}" value="{% if user.username in photo.get_likers %}Liked{% else %}Like{% endif %}" type="button" />
    <a href="#" id="like_count">0</a>
{% endfor %}

jquery：

$('.like_btn').click(function(e){
    e.preventDefault();
    var $like_btn = $(this);
    $.ajax({
        type: "POST",
        url: "{% url 'like_ajax' %}",
        data: {
            "photo_pk": $(this).attr("photo"),
            csrfmiddlewaretoken: "{{ csrf_token }}",
        },
        dataType: "json",
        success: function(data) {
            if (data.viewer_has_liked) {
                $like_btn.val("Liked");
                $('#like_count').html(data.like_count);
            } else {
                $like_btn.val("Like");
                $('#like_count').html(data.like_count);
            }
        },
        error: function (rs, e) {
        }
    });
});

Answer 1

每张照片的点赞数都相同：

{% for photo in photos %}
    <a href="#" id="like_count">0</a>
{% endfor %}

因此，只有第一个被识别为'真实'#like_count

由于您有照片的主键，您可以通过合并 photo.pk 来区分 id：

<a href="#" id="like_count-{{ photo.pk }}">0</a>

编辑：

与其更改每个点赞数的 id，不如将其变成一个类并调整 JavaScript。尝试以下更改：

在 HTML 中，改变这个：

<a href="#" id="like_count">0</a>`

到这里：

<a href="#" class="like_count">0</a>

在 JavaScript 中，改变这个：

if (data.viewer_has_liked) {
    $like_btn.val("Liked");
    $('#like_count').html(data.like_count);
} else {
    $like_btn.val("Like");
    $('#like_count').html(data.like_count);
}

到这里：

if (data.viewer_has_liked) {
    $like_btn.val("Liked");
    $like_btn.next('.like_count').html(data.like_count);
} else {
    $like_btn.val("Like");
    $like_btn.next('.like_count').html(data.like_count);
}

此更改将使类似计数成为一个类 (.like_count)。然后在 JavaScript 中，您将选择与.like_count 匹配的下一个选择器（在$like_btn 之后）。

Answer 2

循环中的<a>标签有相同的id是冲突的，所以在<a>标签属性中为jquery选择器设置一个唯一索引