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

Posted 2023-02-24

【中文标题】Div 在使用 ajax 和 django 进行第二次点击后显示/隐藏

【英文标题】：Div shows/hides after second click with ajax and 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 具有正确的值。

【参考方案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();。