前端项目的后补战

经过考核的神圣洗礼，那令人窒息的压迫感，终是化成对我们项目的不满。“项目页面交互不成功，前端的页面都是静态的？”于是便‘破格’再给我们增加两周的时间进行页面的重新运行，两周说快也快，说不快的都是大佬...

接下来的代码是我在进行多级评论的写的一段代码，我的想法是将回复的评论作为上一级的子元素，于是便在内容的下方添加了接受下一级评论的ul标签，再JS中同样的道理再添加页面的时候也在内容的下方加入ul并将文本框的内容放置再页面中就行了，而对于评论来说，就相对简单很多了，直接再第一级的ul中添加内容就行了。

//关键代码
function reply(event) {
    const m = event.parentNode.parentNode.parentNode.parentNode.parentNode.lastElementChild;
    console.log(m);
    console.log(temp);
    replyUser.innerHTML = `回复${name}`;
    replyIt.onclick = function(){
        const text = document.querySelector('.replyComment-window').value;
        m.innerHTML+=`
            <li>
            <div class="comments">
                <div class="selfComment">
                    <div class="headshot">
                        <img class="userHead" src="#" alt="用户头像">
                            <span id="Userid">XXX</span>
                    </div>
                    <div class="replyId">
                        <span>${replyUser.innerHTML}</span>
                        <p class="replyComment" style="margin-top: 10px;">
                            ${text}
                    </div>
                    <div class="commentOprate">
                        <div class="commentbtn">
                            <button class="like" onclick="like(this)">点赞(<span>5</span>)</button>
                            <button class="reply" onclick="reply(this)">回复(<span>6</span>)</button>
                        </div>
                    </div>
                </div>
            </div>
            <ul></ul>
        </li>

`

<div class="commentTop" >
    <div class="bookMessage">
        <img src="#" alt="图片">
        <p>
                <span>
                    评价 《<span style="font-size: 20px; color: #ed9db2;">XXX</span>》
                </span>
        </p>

    </div>

    <p style="background: url(./Flyflower.gif);background-size: cover" >善言结善语，恶语伤人心</p>
</div>
<div class="homeComment" style="max-width: 900px;margin: 85px auto">
    <!-- 书友评论 -->
    <h2 style="margin-left: 20px;
                margin-bottom: 15px">评论</h2>
    <ul>
        <li>
            <div class="comments">
                <div class="selfComment">
                    <div class="headshot">
                        <img class="userHead" src="#" alt="用户头像">
                        <span class="Userid">用户名称XXX</span>
                    </div>
                    <div class="replyId">
                        <span>回复XXX</span>
                        <p class="replyComment" style="margin-top: 10px;">
                            你不会再遇见第二个我，友情也好，爱情也罢，失去什么都坦然接受，唯独失去你的时候，我差点没缓过来。 ——宫崎骏</p>
                    </div>
                    <div class="commentOprate">
                        <div class="commentbtn">
                            <button class="like" onclick="like(this)">点赞(<span>5</span>)</button>
                            <button class="reply" onclick="reply(this)">回复(<span>6</span>)</button>
                        </div>
                    </div>
                </div>
            </div>
//关键代码
            <ul></ul>
        </li>

    </ul>
</div>
<div class="replyWindow">
    <h3 id="replyUser">回复鸡哥</h3>
    <div class="replyText">
            <textarea class="replyComment-window" style="min-height: 277px;height: auto;"
                      placeholder="快加入我们一起讨论吧"></textarea>
    </div>
    <div class="textreplyFlex">
        <div class="replyOprate">
            <button id="replyIt">回复</button>
            <button class="cancelIt">取消</button>
        </div>

    </div>
</div>

 效果图

 如果大佬还有更多方法还请多多指出，在接下来的一周时间中我将完成前后端的交互以及页面的跳转，使自己的页面不给小组拖后腿，如果时间还够的话，再加一两个功能也是加分项呢，在前端的路上，我还需要走的很长

千里之行，始于足下。

前端学习的第98天