Question

当我选择＆＃34;喜欢＆＃34;按钮，按钮正确更新。然而，＆＃34;像计数＆＃34;仅更新第一张图像的计数，而不是我选择的图像。

任何想法如何只使所选图像像按钮那样计数更新？

提前谢谢！

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

每张照片的ID都相同：

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

因此，只有第一个被认为是真实的＆＃39; #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_btn匹配的下一个选择器（.like_count之后）。

Answer 2

循环中的<a>标签具有相同的ID冲突，因此在jquery选择器的<a>标签属性中设置唯一索引

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

2 个答案: