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 {%

这是upvote和upvoted按钮的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变量放入控制器网址，而不是{{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');
        }
    });
});

我的Jquery-Ajax upvoting代码出现问题

1 个答案: