项目实训——初版的页面优化（3）

这篇主要讲功能的增加。

话题的评论删除

首先放上评论的模板：

<script id="imgCardScript" type="text/html">
    <div style="height: 44px; background-color: #6d638f;margin-bottom: 5px">
        <p style="color: ghostwhite;font-size: 22px;margin: 0 0 10px 15px;padding-top: 5px;font-weight: 300">评论</p></div>
    <ul>
        {{#  layui.each(d, function(index, item){
        }}
        <li>
            <div class="layui-card commentcard showcard" id={{item.id.rank}} style="margin-bottom: 2px;background-color: floralwhite" >
                <div class="layui-card-header"  style="padding:5px 0 45px 20px;font-size: 20px;color: slateblue">
                    {{item.user_id}}<span style="display: none">{{item.user_id}}</span></div>
                <div class="layui-card-body">
                    <p style="color: #6d638f">{{item.topic_comments}}</p>
                    <p style="color: #6d638f">{{item.comment_time}}<span style="float: right;margin-right: 50px;">{{item.id.rank}}楼</span></p>
                </div>
            </div>
        </li>
        {{#
        }); }}
        {{#  if(d.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>

相比之前的模板，在header里多加了一个<span style="display: none">{{item.user_id}}</span>。这样后期就能把评论人的名字显示出来。
第一步，显示删除图标。当鼠标移入评论的时候，图标显示，移出则不。
第二步，通过判断用户和发帖人或评论人的id是否吻合，区分显示删除图标。
第三步，点击图标后要进行二次确认，通过ajax实现删除功能。

<script>
    $('body').on("mouseenter",".commentcard",function (event) {
        var header = $(this).children("div .layui-card-header");
        var rank = event.currentTarget.id;
        //创建新元素
        var div = document.createElement("div"),
            delcomment = document.createElement("i"),
            reply = document.createElement("i");
        div.className = "toolbox";
        div.style.cssFloat = "right";
        div.style.marginRight = "50px";
        delcomment.id="del";
        delcomment.classList.add("layui-icon");
        delcomment.classList.add("layui-icon-delete");
        delcomment.style.color = "#4d2eb3";
        delcomment.style.fontSize = "20px";
        delcomment.style.marginRight = "20px";
        reply.id = "reply";
        reply.classList.add("layui-icon");
        reply.classList.add("layui-icon-dialogue");
        reply.style.color = "#4d2eb3";
        reply.style.fontSize = "20px";
        var topicuid = [[${topic.user_id}]];
        var userid = [[${session.loginUserId}]];
        //如果用户id和发帖人id相同，或者和回复人id相同，删除图标append
        if(topicuid==userid||userid==header.children().text()){
            div.appendChild(delcomment);
        }
        div.appendChild(reply);//回复，可先注释
        header.append(div);//显示
        //点击删除
        layui.use('layer', function() {
            var layer = layui.layer;
            $("#del").on("click", function () {
                layer.confirm("确定删除？", {
                    title:"提示",
                    btn:["取消","确定"],
                    //右上角x号
                    cancel: function (index) {
                        layer.close(index)
                    },
                    //取消
                    btn1:function (index) {
                        layer.close(index);
                    },
                    //确定
                    btn2:function (index) {
                        console.log(rank);
                        $.ajax({
                            url:""
                            ,dataType:"json"
                            ,data:{"rank":rank,"topicid":[[${topic.topic_ID}]]}
                            ,success: function (json) {
                                if (json.code == 0) {
                                    //刷新页面
                                }else {
                                    layer.alert("删除失败，请稍后再试");
                                    return false;
                                }
                            }
                        })
                    }
                });
            });
        });
    });
    $('body').on("mouseleave",".commentcard",function () {
        var box = $(this).children("div .layui-card-header").children("div .toolbox");
        box.remove();
    });
</script>

实现根据城市筛选功能

为了让板块页面不那么枯燥，我们决定增加筛选功能。此处参考boss直聘的页面：

左边显示用户选择的城市，右边则是一些热门城市和恢复初始（不限），最右是全部城市的选择。

<div class="conditionbox">
    <dl class="condition-city">
        <dd class="city-wrapper">
            <span id="selectedcity" style="color: #009688;margin-right: 10px;">不限</span>
            <i class="layui-icon layui-icon-right" style="font-size: 12px; color: #666;margin-right: 15px;"></i>
            <a class="city" href="javascript:;">不限</a>
            <span style="margin-right: 15px;color: #6d638f">热门城市：</span>
            <a class="city">北京</a>
            <a class="city">上海</a>
            <a class="city">广州</a>
            <a class="city">深圳</a>
            <a class="city">杭州</a>
            <a class="city">西安</a>
            <a class="city">天津</a>
            <a class="city">重庆</a>
            <a class="city">成都</a>
            <a class="city">长沙</a>
            <a class="city">苏州</a>
            <a class="get-all-cities" style="color:#009688;margin-left: 10px ">全部城市</a>
        </dd>
    </dl>
</div>

全部城市的显示和选择就不展示了，我这里用了很笨的方法，把所有城市都写进网页里了，代码巨长无比。
当点击选择城市后，城市名显示在左侧，同时进行查询。

<script>
    $(".city-wrapper").on("click",".city",function (event) {
        var city = event.currentTarget.text;//获取城市
        console.log(city);
        $("#selectedcity").text(city);
        $.ajax({
            url:""
            ,dataType:"json"
            ,data:{"city":city}
            ,success: function (json) {
                if (json.code == 0) {
                    //重新获得数据
                } else {
                    alert("失败，请稍后再试");
                    return false;
                }
            }
        });
    });
    $(".city-wrapper").on("click",".get-all-cities",function (event) {
        $("#cityshow").toggle();
        $("#over").toggle();
    });
    $("#cityshow").on("click","#cityclose",function (event) {
        $("#cityshow").toggle();
        $("#over").toggle();
    });
    $("#cityshow").on("click",".cities",function (event) {
        var city = event.currentTarget.innerHTML;//获取城市
        console.log(city);
        $("#selectedcity").text(city);
        $("#cityshow").toggle();
        $("#over").toggle();
        $.ajax({
            url:""
            ,dataType:"json"
            ,data:{"city":city}
            ,success: function (json) {
                if (json.code == 0) {
                    //重新获得数据
                    $("#selectedcity").text(city);
                    $("#cityshow").toggle();
                    $("#over").toggle();
                } else {
                    alert("失败，请稍后再试");
                    return false;
                }
            }
        });

    });
</script>

实现图如下：