Javascript Can'；单击“喜欢”按钮时，不要使用ajax更改磁带中帖子的喜欢数

我正在努力学习django和更多。 在计算磁带中每个帖子的赞数时遇到问题。问题是我无法获得帖子的id。 如果我刷新页面，喜欢的次数会发生变化。但要用ajax改变它才是真正的问题。 请告诉我，如果单击“喜欢”按钮，如何使更改喜欢对磁带中的每个帖子都起作用

Ajax代码

{% block jquery %}

function updatePostLikesCount(){
    var postlikescount = $(".post-likes-count")
    $.ajax({
        type: "GET",
        url: "/like_post/{{ post.id }}/post_likes_count/",
        success: function(data){
            postlikescount.html(data.count);
        },
        error: function(response, error){
        }
    })
}

$(".post-like").click(function(event){
    var img = $(this);
    event.preventDefault();
    $.ajax({
        url: img.parent().attr('href'),
        success: function(){
            updatePostLikesCount();
        },
        error: function(response, error){
        }
    })
});

{% endblock %}

这是帖子的录音带

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

            <span class="post-likes-count" >
                {{ post.like.liked_users.count }}
            </span>

{% endfor %}

---

否则，我试图用likes重新加载页面的一个元素，但失败了：-）

一些改进方法

首先。。。您总是希望计数的html存在，并且只有在没有喜欢或显示为零时才应该隐藏它。否则，当第一个like被投票时，您将需要添加带有javascript的html

下一个

这将包括页面中该类的所有元素。。。。而不是单击按钮时所需的特定项

相反，您可以将所需的参数作为参数传递到

updatePostLikeCount（）

改变

function updatePostLikesCount(){
        var postlikescount = $(".post-likes-count");

到

并在单击处理程序中修改，以便传入适当的元素

success: function() {
     // which count element
     var $countElement = img.next();
     // pass to function
     updatePostLikesCount($countElement);
}

---

更新：

{% block jquery %}
    function updatePostLikesCount(postlikescount){
        $.ajax({
            type: "GET",
            url: "/like_post/"+postlikescount.data().id+"/post_likes_count/",
            success: function(data){
                alert('class is '+postlikescount.parent().find('.post-likes-count').attr('class'));
                postlikescount.parent().find('.post-likes-count').html(data.count).show();
                alert('likes count '+data.count);
            },
            error: function(response, error){
            }
        })
    }

    $(".post-like").click(function(event){
        var img = $(this);
        event.preventDefault();
        $.ajax({
            url: img.parent().attr('href'),
            success: function(){
                var like = img.parent();
                updatePostLikesCount(like);
            },
            error: function(response, error){
            }
        })
    });
{% endblock %}

稍微更改视图，如下所示（添加数据id）：

{%用于磁带%中的post}
...
{{post.text}
...
{{post.like.liked_users.count}
{%endfor%}

Hi@charlietfl！我添加了你的代码，每次单击“喜欢”按钮时，它都会重新加载我的整个页面。可能是在浏览器控制台中抛出错误。总是先看那里是的，有一个错误

ReferenceError:postlikescount没有定义

你是否像我在开始时建议的那样将

包含在页面中？是的，它从一开始就存在。你从哪里获得{post.id}值，请让页面重新加载，然后右键单击页面并检查{post.id}被实际id替换，这只是为了在我建议解决方案之前确认。嗯。。。

$（“.post like”）中的id没有问题。单击（函数（事件）{

函数updatePostLikeCount（）{和

url有问题：“/like_post/{{post.id}/post_likes_count/”，

它试图发送此url

url:/like_post//post_likes_count，

只需在span标记本身中保留一个

if-else

，以

隐藏
span如果计数为0，我对python没有经验，因此我猜如果if-else条件错误，您可以编辑它。它不会更改likes编号。但是链接
/like_post/“+postlikescount.data（）.id+”/post_likes_count/
用post id发送，酷！你能在更新likes count的成功函数中添加这个
警报（JSON.stringify（data））；
并告诉我输出吗？它告诉警报中的likes数。如果一次又一次地点击按钮，则数字会改变，然后将这个
.html（data.count）
更改为
.html（data）
.Is

function updatePostLikesCount(postlikescount){

success: function() {
     // which count element
     var $countElement = img.next();
     // pass to function
     updatePostLikesCount($countElement);
}

{% block jquery %}
    function updatePostLikesCount(postlikescount){
        $.ajax({
            type: "GET",
            url: "/like_post/"+postlikescount.data().id+"/post_likes_count/",
            success: function(data){
                alert('class is '+postlikescount.parent().find('.post-likes-count').attr('class'));
                postlikescount.parent().find('.post-likes-count').html(data.count).show();
                alert('likes count '+data.count);
            },
            error: function(response, error){
            }
        })
    }

    $(".post-like").click(function(event){
        var img = $(this);
        event.preventDefault();
        $.ajax({
            url: img.parent().attr('href'),
            success: function(){
                var like = img.parent();
                updatePostLikesCount(like);
            },
            error: function(response, error){
            }
        })
    });
{% endblock %}

{% for post in tape %}
    ...
    {{ post.text }}
    ...
    <a href="/like_post/{{ post.id }}/" data-id="{{post.id}}">
        <img class="post-like"  src="{% static "" %}"/>
    </a>

     <span class="post-likes-count" {% if post.like.liked_users.count == 0 %}style="display:none;"{% endif %}>
                {{ post.like.liked_users.count }}
     </span>
{% endfor %}