Django多级评论(2)

image description

Django多级评论(2)

写在最前面:

多级评论对前端的样式展示要求还是比较高的,现将需求降级,改为二级评论,即只能回复一次,如需继续回复,只需直接提交新评论。事实上,我们的表结构设计是没问题的,可以支撑更多层的回复。这一次的难点在于前端,就一个输入框,如何判断你在哪个评论下回复,或者是新增新的评论。

效果图如下: 图片

看下评论回复的html代码:

<p class= "comment-reply-link" onclick=addComment() >REPLY</p>
<script>
                                                    function addComment() {
                                                        document.getElementById("author").focus()
                                                    }
</script>
<section class="section comments wow fadeInUp" data-wow-delay="0.4s">
                                <header class="header">
                                    <h2>Comments on this post</h2>
                                    <p>{{ comment_list.count }} comments</p >
                                </header>
                                <!-- Comment list of the page -->
                                <div class="commentlist" id="commentlist">
                                    <!-- Comment list item of the page -->
                                    {% for i in comment_list %}
                                    {% if i.parentcomment %}
                                    <div class="commentlist-item">
                                        <div class="comment even thread-even depth-1" id="comment-1">
                                            <div class="avatar-holder">
                                                < img alt="image description" src="/static/JiaBlog/images/img56.jpg" class="avatar avatar-48 photo avatar-default">
                                            </div>
                                            <div class="commentlist-holder">
                                                <p class="meta">
                                                    <strong class="name"><a href=" ">{{ i.parentcomment.name }}</a ></strong>
                                                    <a href="#"><time datetime="2011-01-12">{{ i.parentcomment.created_time|date:"Y-m-d H:i:s" }}</time></a >
                                                </p >
                                                <p>{{ i.parentcomment.text }}</p >
                                                <div class="comment-reply-link">
                                                    <p><input class="comment-reply-link" type="button" value="Reply" onclick=Reply()></p ></div>
<script>
    function Reply() {
          var cID = {{ i.id}};
          document.getElementById('comment').focus();
          $('#dosubmit').data('cid',cID);
          console.log(cID)                                              
                            }
</script>
                                            </div>
                                        </div>
                                        <div class="commentlist-item">
                                            <div class="comment even thread-even depth-1" id="comment-3">
                                                <div class="avatar-holder">
                                                    < img alt="image description" src="/static/JiaBlog/images/img57.jpg" class="avatar avatar-48 photo avatar-default">
                                                </div>
                                                <div class="commentlist-holder">
                                                    <p class="meta">
                                                        <strong class="name"><a href="#">{{ i.name }}</a ></strong>
                                                        <a href="#"><time datetime="2011-01-12">{{ i.created_time }}</time></a >
                                                    </p >
                                                    <p>{{ i.text }}</p >
                                                    <!--p><a class="comment-reply-link" href="#" onclick="return addComment.moveForm(&quot;comment-3&quot;, &quot;1&quot;, &quot;respond&quot;, &quot;1&quot;)">REPLY</a ></p-->
                                                </div>
                                            </div>
</div>
                                     </div>
                                    {% else %}
                                    <div class="commentlist-item">
                                        <div class="comment even thread-even depth-1" id="comment-1">
                                            <div class="avatar-holder">
                                                < img alt="image description" src="/static/JiaBlog/images/img56.jpg" class="avatar avatar-48 photo avatar-default">
                                            </div>
                                            <div class="commentlist-holder">
                                                <p class="meta">
                                                    <strong class="name"><a href="#">{{ i.name }}</a ></strong>
                                                    <a href="#"><time datetime="2011-01-12">{{ i.created_time }}</time></a >
                                                </p >
                                                <p>{{ i.text }}</p >
                                                <p><a class="comment-reply-link" href="#" onclick="return addComment.moveForm(&quot;comment-1&quot;, &quot;1&quot;, &quot;respond&quot;, &quot;1&quot;)">REPLY</a ></p >
                                            </div>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                    <!-- Comment list item of the page end -->
                                    <!-- Comment list item of the page -->
                                    <div class="commentlist-item">
                                        <!--div class="comment even thread-even depth-1" id="comment-2">
                                            <div class="avatar-holder">
                                                < img alt="image description" src="/static
/JiaBlog/images/img57.jpg" class="avatar avatar-48 photo avatar-default">
                                            </div>
                                            <div class="commentlist-holder">
                                                <p class="meta">
                                                    <strong class="name"><a href="#">John Doe</a ></strong>
                                                    <a href="#"><time datetime="2011-01-12">2 hours ago</time></a >
                                                </p >
                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam erat volutpat.</p >
                                                <p><a class="comment-reply-link" href="#" onclick="return addComment.moveForm(&quot;comment-2&quot;, &quot;1&quot;, &quot;respond&quot;, &quot;1&quot;)">REPLY</a ></p >
                                            </div>
                                        </div-->
                                        <!-- Comment list item of the page -->
                                        <!--div class="commentlist-item">
                                            <div class="comment even thread-even depth-1" id="comment-3">
                                                <div class="avatar-holder">
                                                    < img alt="image description" src="/static/JiaBlog/images/img58.jpg" class="avatar avatar-48 photo avatar-default">
                                                </div>
                                                <div class="commentlist-holder">
                                                    <p class="meta">
                                                        <strong class="name"><a href="#">John Doe</a ></strong>
                                                        <a href="#"><time datetime="2011-01-12">2 hours ago</time></a >
</p >
                                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam erat volutpat.</p >
                                                    <p><a class="comment-reply-link" href="#" onclick="return addComment.moveForm(&quot;comment-3&quot;, &quot;1&quot;, &quot;respond&quot;, &quot;1&quot;)">REPLY</a ></p >
                                                </div>
                                            </div>
                                        </div-->
                                        <!-- Comment list item of the page end -->
                                    </div>
                                    <!-- Comment list item of the page end -->
                                </div>
                                <!-- Comment list of the page end -->
</section>

首先是reply这里,我们写一个onclick,这个onclick会找到当前这条你要回复的评论的id,然后传递个id=dosubmit的input,同时将鼠标焦点移到评论框内。这一步很关键,只有拿到你要回复的id,你才能保存数据。

    ArithmeticJia         0         2953         Django         16    

David Ramon

ArithmeticJia

www.guanacossj.com

Life is Short,You need Python

Related Posts

You may like these post too

image description

用Django写一个自己的博客网站

##写在最前面: 想用Django写网站很久了,本地也建立过很多demo,对于整个框架的入门算是熟练了。用pycharm可 以很方便的新建一个Django工程。专业版的Pycharm是自带Django的,目前Diango的最新版本应该是2.1。 IDE:Pycharm python版本

image description

Django和Flask的区别

##写在最前面: python web开发有很多常用的框架,主要包括Django,Flask,Tornado,Diesel,Cubes,Pulsar,Falcon,webpy,大家最熟知的还是Django和Flask,今天就来简单介绍一下Django和Flask的区别,本博客就是使用Django开

Comments on this post

0 comments

Leave a comment

it’s easy to post a comment

image description
image description
image description
image description
image description
image description
image description
image description
image description

Copyright © 2019.Company name All rights reserved.苏ICP备19007197号