一个基本jquery的评论留言模块

Posted 2020-06-17

<style>
        /* clear default */
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, input, select, textarea, table, caption, tbody, tfoot, thead, tr, th, td, .x {margin: 0;padding: 0;}
        ul,li {list-style:none;}
        table {border-collapse:separate;}
        a img, img, iframe {border:none;}
        a span, form label {cursor:pointer;}
        html{color:#333;}
        body,input,select,textarea{font:500 14px/1.6 "microsoft yahei",Hiragino Sans GB,arial,simsum,WenQuanYi Micro Hei,sans-serif; outline:none;}
        a { text-decoration:none; cursor:pointer;}
        a:link, a:visited { color:#2399dc; }
        a:hover{ color:#2399dc; text-decoration:none;}
        a:active, a:focus{ color:#2399dc; text-decoration:none;}

        /*评论*/
        .fl{ float:left;}
        .fr{ float:right;}
        .productDiscuss{ margin:6px 0 0;}
        .productDiscuss .title{ margin-bottom:54px; text-align:center; border-bottom:1px solid #b2b2b2;}
        .productDiscuss .pl_title{ position:relative; top:24px; display:inline-block; padding:0 30px; height:48px; line-height:48px; border:1px solid #b2b2b2; color:#2399dc; font-size:30px; background:#fff;}
        .productDiscuss .gray{ padding-left:10px; color:#999;}
        .productDiscuss .red{ color:#ee1212; cursor:pointer;}
        .productDiscuss .Tip{ line-height:36px; cursor:default; padding-right:10px; font-size:12px;}
        .productDiscuss .right{ width:625px;}
        .productDiscuss .discussList .right{ width:680px; }
        .productDiscuss .btn{ display:inline-block; padding:0 15px; height:34px; line-height:34px; border-radius:5px;  cursor:pointer;}
        .productDiscuss .updateImg{ background:#bbc0c3;  border:1px solid #959595; color:#fff; }
        .productDiscuss .submitBtn,.productDiscuss .submitBtn2,.productDiscuss .submitBtn3{ padding:0 30px;  background:#2399dc; color:#fff;  border:1px solid #2399dc;}
        .discussList,.contBox{  overflow:hidden;}
        .contBox{ margin-bottom:30px; padding:20px 20px 30px; border:1px solid #959595; border-radius:10px; background:#eff5f8;}
        .discussList li{ margin-bottom:15px; padding:0 0 20px; border-bottom:1px solid #b2b2b2; overflow:hidden;}
        .discussList li:last-child{ border-bottom:none;}
        .productDiscuss .picDefault{ padding:0 20px 0 0; width:50px; height:50px; }
        .productDiscuss .picDefault img{ width:100%; border-radius:50%; }
        .productDiscuss .textarea{ float:left; padding:7px 0 0 7px; width:615px; height:70px; line-height:24px; border-radius:10px; }
        .productDiscuss .discussList .textarea{ width:670px; }
        .productDiscuss .discussArea{ overflow:hidden; padding-bottom:10px; }
        .discussList .info{ font-size:12px; color:#999; }
        .discussList .addDiscuss{}
        .discussList .otherLY{ overflow:hidden; padding-top:10px;}
        .discussList .content{ padding:5px 0; line-height:18px;}
        .discussList h5{ font-size:14px;}
        .discussList .house{ overflow:hidden; width:660px; margin-top:10px; padding:5px 10px; background:#eee;}
        .discussList .house dd{ overflow:hidden; padding:5px 0;}
        .discussList .parag{ padding-right:10px; width:590px; color:#333;}
        .discussList .huifu{ color:#ee1212; cursor:pointer;}
        .discussList .deletedDiscuss,.discussList .deletedDiscuss2{ margin-right:10px;}
    </style>

<div class="productDiscuss">
    <div class="title"><span class="pl_title">评论</span></div>
    <div class="contBox">
        <div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>
        <div class="fl right">
            <div class="discussArea">
                <textarea class="textarea" id="content" placeholder="小李子，说点什么吧~~"></textarea>
            </div>
            <div class="otherInfo">
                <span class="fl btn updateImg">选择图片</span>
                <span class="fr btn submitBtn" id="submitBtn">发布</span><span class="fr red Tip" style="display:none;" id="submitBtnTip">请输入内容</span>
            </div>
        </div>
    </div>
    <div class="discussList">
        <ul>
        </ul>
    </div>
</div>

<script>
    $(function(){
        //发布1
        $(‘#submitBtn‘).click(function(){
            var content = $(‘#content‘).val();
            var html = ‘<li>‘+
                    ‘<div class="fl picDefault"><img src="${pageContext.request.contextPath}/resources/images/default_user_icon.jpg" /></div>‘+
                    ‘<div class="fl right">‘+
                    ‘<h5><a href="#">小李子</a></h5>‘+
                    ‘<div class="content">‘+content+‘</div>‘+
                    ‘<div class="info">‘+
                    ‘<span>1小时前</span>‘+
                    ‘<span class="fr red addDiscuss">评论(0)</span><span class="fr red deletedDiscuss">删除</span>‘+
                    ‘<div class="otherLY" style="display:none;">‘+
                    ‘<div class="discussArea"><textarea class="textarea" placeholder="小李子，说点什么吧~~"></textarea></div>‘+
                    ‘<div style="overflow:hidden;" class="my_din"><span class="fr btn submitBtn2">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span></div>‘+
                    ‘</div>‘+
                    ‘<div class="house" style="display:none;">‘+
                    ‘<dl>‘+
                    ‘</dl>‘+
                    ‘</div>‘+
                    ‘</div>‘+
                    ‘</div>‘+
                    ‘</li>‘;

            if(content == ‘‘){
                $(‘#submitBtnTip‘).show()
                return false;
            }
            $(‘#submitBtnTip‘).hide();
            $(‘.discussList ul‘).append(html);
        })

        //评论
        $(‘.addDiscuss‘).live(‘click‘,function(){
            $(this).nextAll(‘.otherLY‘).toggle();
        })

        //发布2
        $(‘.submitBtn2‘).live(‘click‘,function(){
            var content = $(this).parents(‘.my_din‘).siblings(‘.discussArea‘).find(‘.textarea‘).val();
            var html =
                    ‘<dd>‘+
                            ‘<div class="fl parag"><a href="#">小王子</a>：‘+content+‘<span class="gray">4天前</span></div>‘+
                            ‘<span class="fl red deletedDiscuss2">删除</span>‘+‘<span class="fl huifu">回复</span>‘+
                            ‘</dd>‘;

            if(content == ‘‘){
                $(this).next(‘.Tip‘).show();
                return false;
            }
            $(this).parents(‘.otherLY‘).next(‘.house‘).show().append(html);
            $(this).next(‘.Tip‘).hide();
        })

        //回复
        $(".huifu").live(‘click‘,function(){
            var sid = $(this).attr(‘sid‘);
            var list =
                    ‘<div class="otherLY otherLy2" style="width:640px;">‘+
                            ‘<div class="discussArea"><textarea class="textarea" style=" width:630px;" placeholder="小李子，说点什么吧~~"></textarea></div>‘+
                            ‘<span class="fr btn submitBtn3">发布</span><span class="fr red Tip" style="display:none;">请输入内容</span>‘+
                            ‘</div>‘;

            if(!$(this).hasClass(‘current‘)){
                $(this).addClass(‘current‘);
                $(this).after(list);
            }else{
                $(this).removeClass(‘current‘);
                $(this).next(‘.otherLy2‘).remove();
            }
        })
        //删除1
        $(‘.deletedDiscuss‘).live(‘click‘,function(){
            $(this).parents(‘li‘).remove();
        })
        //删除2
        $(‘.deletedDiscuss2‘).live(‘click‘,function(){
            var len = $(this).parents(‘.house‘).find(‘dd‘).size() - 1;
            if(len == 0){
                $(this).parents(‘.house‘).hide();
                $(this).parent().remove();
            }else{
                $(this).parent().remove();
            }
        })

        //发布3
        $(‘.submitBtn3‘).live(‘click‘,function(){
            var content = $(this).siblings(‘.discussArea‘).find(‘.textarea‘).val();
            var html =
                    ‘<dd>‘+
                            ‘<div class="fl parag"><a href="#">小海子</a>回复了<a href="#">小王子</a>：‘+content+‘<span class="gray">4天前</span></div>‘+
                            ‘<span class="fl red deletedDiscuss2">删除</span>‘+‘<span class="fl red huifu">回复</span>‘+
                            ‘</dd>‘;

            if(content== ‘‘){
                $(this).next(‘.Tip‘).show();
                return false;
            }
            $(this).next(‘.Tip‘).hide();
            $(this).parents(‘dd‘).after(html);
            $(this).parent().prev(‘.huifu‘).removeClass(‘current‘);
            $(this).parent(‘.otherLy2‘).remove();
        })
    })
</script>