Div 在使用 ajax 和 django 进行第二次点击后显示/隐藏答案

【问题标题】：Div shows/hides after second click with ajax and djangoDiv 在使用 ajax 和 django 进行第二次点击后显示/隐藏
【发布时间】：2020-12-27 02:34:17
【问题描述】：

我想在我的应用中拥有简单的功能。当用户单击“显示回复”按钮时，将显示带有“回复”类的 div，然后按钮变为“隐藏回复”，再次单击时，该 div 将消失。我很接近但问题是：当我第一次单击按钮时（重新加载页面后），按钮变为“隐藏”，数据未显示。直到我第二次点击它显示，然后我有数据和按钮“显示回复”。换句话说：ajax 调用在第一次时不起作用，即使第一次单击也能正确打印数据。请帮助我了解问题所在。

ajax

$(document).ready(function () {
    $(".showReplies").click(function () {
        let id = $(this).attr('id');
        $.ajax({
            url: $(this).attr("data-href"),
            type: 'get',
            success: function (data) {
                console.log(data);
                $(`#${id}.replies`).html(data);
                let text = $(`#${id}.showReplies`).text()
                if (text == 'Show replies') {
                    text = 'Hide replies'
                    $(`#${id}.showReplies`).text(text)
                } else {
                    text = 'Show replies'
                    $(`#${id}.showReplies`).text(text)
                }
            }
        })
    });
});

模板

<button type="button" id="{{ comment.id }}" class="showReplies btn btn-link" data-href="{% url 'comment_replies' comment.id %}">Show replies</button>
    <div class="replies" id="{{ comment.id }}" style="margin-left: 30px;">
        {% include 'blog/comment_replies.html' %}
    </div>

网址

path('comment_replies/<int:comment_id>/', comment_replies, name='comment_replies')

查看

def comment_replies(request, comment_id):
    comment = Comment.objects.get(id=comment_id)
    replies = Reply.objects.filter(comment=comment)
    context = {'replies': replies}
    return render(request, 'blog/comment_replies.html', context)

【问题讨论】：

你能在你的if里面做警报，看看那个警报是否显示？
我必须说我从 ajax 正上方删除了行 $(#${id}.replies).toggle(); 并且它仍在切换，但是当我今天运行代码时，它停止了，当我放回线切换停止工作，并在第一次点击时显示 div...
data 是否有 .showReplies 文本，您在此处访问 $('#${id}.showReplies').text()？
不，它没有，它有带有回复的模板内容
您的代码对我来说似乎没问题。可能问题出在其他地方。还要确保text 具有正确的值。

标签： ajax django-views django-templates

【解决方案1】：

好的，@Swati 找到了解决方案：

$(document).ready(function () {
    $(".showReplies").click(function () {
        let id = $(this).attr('id');
        $.ajax({
            url: $(this).attr("data-href"),
            type: 'get',

            success: function (data) {
                console.log(data);

                $(`#${id}.replies`).html(data);
                let text = $(`#${id}.showReplies`).text();
                console.log(text);
                if (text == 'Show replies') {
                    text = 'Hide';
                    $(`#${id}.showReplies`).text(text);
                    $(`#${id}.replies`).show();
                } else {
                    text = 'Show replies';
                    $(`#${id}.showReplies`).text(text);
                    $(`#${id}.replies`).hide();
                }
            }
        })
    });
});

我必须在if和else中添加$(#${id}.replies).show();和$(#${id}.replies).hide();。

【讨论】：