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

Posted 2023-02-24

【中文标题】按钮更新第一个元素的文本而不是选定元素

【英文标题】：Button updates text of first element instead of selected element

【发布时间】：2015-08-31 15:59:51

【问题描述】：

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

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

提前谢谢你！

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) 
        
    );
);

【参考方案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 之后）。

【讨论】：

我还需要更新 jQuery 吗？如果有，怎么做？

@jape：正在更新我的答案以做到这一点！ 5 分钟或更短时间或您的 $$ 返回

【参考方案2】：

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

【讨论】：

如果不介意的话，可以举个例子让我比较一下吗？

@jape: <a href="#" id="like_count- photo.pk ">0</a>

mfcovington 的评论是可用的，你也有另一个想法来获取<a> 和$like_btn.parent().chlidren().find('a')