我的 Jquery-Ajax 投票代码有问题

Question

在我的项目中，可以对帖子进行投票。当我不使用 Jquery-Ajax 时，这很好用。不过，它会重新加载页面，我不希望这样。

我实现了一些 Jquery-Ajax 来执行 POST 请求，并将按钮更新为 upvoted。不幸的是，这会导致列表中的所有帖子都被点赞，而不仅仅是我点击的帖子。

让我向您展示 HTML（在循环的帖子列表中）：

{% for post in posts %}
{{ post.title }}
<hr>
{{ post.content }}
{% with user=request.user %}
    <a class="upvote" data-postid="{{ post.id }}"  href='#' >
        <span class="btn btn-primary" aria-hidden="true">
            Upvote | {{ post.followers }}
        </span>
    </a>

        {% endwith %}
        {% endfor {%

这是赞成和赞成按钮的 HTML。

这是我的 Jquery 脚本：

<script src="{% static 'posts/jquery-3.1.1.js' %}"></script>

<script type="text/javascript">
$(".upvote").click(function(event){
var postid = $(this).data('postid');
$.ajax({url: "/activity/follow/10/{{ post.id }}?next={{ request.path }}&postid=" + postid, success: function (data) {
     event.preventDefault();

    $(".upvote").addClass('hidden');

    }


});

});
    </script>

总而言之，我如何让这个功能只对我点击的帖子投票，而不是对列表中的每个人都投票？谢谢！

Answer 1

您需要将 postid 变量放入控制器 URL，而不是 {{post.id}}。 Javascript 代码不应在循环中，因此它无权访问 post 变量。

$(".upvote").click(function(event){
    event.preventDefault();
    var postid = $(this).data('postid');
    var $this = $(this);
    $.ajax({
        url: "/activity/follow/10/" + postid + "?next={{ request.path }}", 
        success: function (data) {
            $this.addClass('hidden');
        }
    });
});