Question

简介：

假设我有一个Quora型应用程序，成员可以在其中提出任何问题，而其他成员可以在其中回答问题。问题和答案都可以被提高或降低。就像在StackOverflow中一样。 请在下面查看屏幕截图

您可以在上方看到，每个页面都有1个问题和对该问题的多个答案。此页面由Django中的Questions DetailView呈现。因此，如果我做question.title，它将打印问题标题。现在，要访问此页面上的每个答案，我在Django模板中进行{% for answer in question.answers.all %}。因此，在模板的forloop之后，直到我到达{% endfor %}，我可以输入answer.something ans，这将在页面上打印出

问题：

我在同一页面上有一个问题upvote/downvote和答案upvote/downvote，问题upvote/downvote脚本的JS效果很好，但是答案upvote/downvote位于forloop中不是。如果单击一次“答复升级” console.log显示我单击了两次。我第二次单击它。console.log显示我已经单击了6次。console.log显示我已经单击了27次。但是我只单击了一次答案upvote/downvote。另外，答案upvote/downvote不会回答他们各自的答案。我单击第二个答案，第一个答案upvote/downvote答复

代码：仅显示答案已投票

模板： 以下代码的说明：用户单击Answer Upvote Button时。首先检查用户是否有Downvoted个答案。如果答案已经为Downvoted，则会带走用户Downvote。这样一来，一个用户就不会对相同的Answer进行投票。如果该答案没有Upvote或Downvote，那么它将Upvote答案

{% for answer in question.answers.all %}
<div>

    {% if user not in answer.ansup.all and user in answer.ansdown.all  %}
        <form action="{% url 'questions:ansdown' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_downvote_button" >
                <img class="answer_up" src="{% static 'images/Upvote_blank.png' %}" height="25px">
            </button>
        </form>
    {% elif user in answer.ansup.all %}
        <form action="{% url 'questions:ansup' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_upvote_button">
                <img class="answer_up" src="{% static 'images/Upvote.png' %}" height="25px">
            </button>
        </form>
    {% else %}
        <form action="{% url 'questions:ansup' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_upvote_button">
                <img class="answer_up" src="{% static 'images/Upvote_blank.png' %}" height="25px">
            </button>
        </form>
    {% endif %}




</div>
<div style="margin-left:5px;">{{answer.ansup.count}}</div>
{% endfor %}

下面是位于forloop中的JS 代码说明：此代码与模板具有完全相同的逻辑。阅读上面的模板代码说明。我知道我两次运行逻辑。但是以某种方式，模板逻辑在脚本中不起作用，反之亦然

<script>
        $(document).ready(function () {
                $(document).on('click', ".ans_upvote_button", function( event ){
                event.preventDefault();
                if ($(".answer_down").attr("src") === "{% static 'images/Downvote.png' %}") {
                    var ifPk = $(this).attr("value");
                    console.log(ifPk);
                    var downVote = $("#answer_downvote_section");
                    console.log(downVote);
                    $.ajax({
                        url : "{{answer.get_ansdown_url}}",
                        type: "POST",
                        data: { "pk": ifPk, "csrfmiddlewaretoken": "{{ csrf_token }}"},
                        dataType: "json",
                        success: function (data) {
                            downVote.html(data["form"]);
                        }, error: function (rs, e) {
                            console.log(rs, e);
                        }
                })
                }else{
                var pk = $(this).attr("value");
                console.log(pk);
                var upVote = $("#answer_upvote_section");
                console.log(upVote);
                $.ajax({
                    url : "{{answer.get_ansup_url}}",
                    type: "POST",
                    data: { "pk": pk, "csrfmiddlewaretoken": "{{ csrf_token }}"},
                    dataType: "json",
                    success: function (data) {
                        upVote.html(data["form"]);
                    }, error: function (rs, e) {
                        console.log(rs, e);
                    }
                })
            }
            })

        })

    </script>

我在做什么错

Django Ajax Upvote / Downvote按钮，其中JS位于forloop中

0 个答案: