jq 评论源码+动态评论回复

最新推荐文章于 2024-06-16 00:47:57 发布
最新推荐文章于 2024-06-16 00:47:57 发布
阅读量536 收藏 4
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44134551/article/details/116146772
版权

网页开发 评论系统 回复功能 动态创建 事件监听
关键词由CSDN通过智能技术生成

评论回复源码下载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<title>添美咨询</title>
		<script src="../../modules/searchtml/js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//用户登录信息
			var logoinfo = JSON.parse(localStorage.getItem('logoinfo'));
		</script>
	</head>
	<body>
				<!-- 回复区 start -->
				<!-- <div class="common-box">
					<div class="common-item">
						<p class="username"><span class="user">本田车主</span></p>
						<div class="userfont">
							<p>这颜值真的帅，不过国内的品牌越野已经次于他了</p>
						</div>
					</div>
				</div> -->
				<!-- 回复区 end -->
			<!-- </div> -->
			<div class="commentAll">
			    <!--评论区域 begin-->
			    <div class="reviewArea clearfix">
			        <textarea class="content comment-input" placeholder="Please enter a comment&hellip;" onkeyup="keyUP(this)"></textarea>
			        <a href="javascript:;" class="plBtn">评论</a>
			    </div>
			    <!--评论区域 end-->
			    <!--回复区域 begin-->
			    <div class="comment-show">
					
			        <!-- <div class="comment-show-con clearfix">
						
			            <div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div>
						
			            <div class="comment-show-con-list pull-left clearfix">
							
			                <div class="pl-text clearfix">
			                    <a href="#" class="comment-size-name">张三 : </a>
			                    <span class="my-pl-con">&nbsp;来啊 造作啊!</span>
			                </div>
							
			                <div class="date-dz">
			                    <span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</span>
			                    <div class="date-dz-right pull-right comment-pl-block">
			                        <a href="javascript:;" class="removeBlock">删除</a>
			                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
			                        <span class="pull-left date-dz-line">|</span>
			                        <a href="javascript:;" class="date-dz-z pull-left">赞 (<i class="z-num">666</i>)</a>
			                    </div>
			                </div>
							
			                <div class="hf-list-con"></div>
			            </div>
			        </div> -->
			    </div>
			    <!--回复区域 end-->
			</div>
			<!--  -->
		</div>
		
		
		<!-- <footer class="footer"> -->
			<!-- <textarea class="footer-input" placeholder="想说点什么"></textarea> -->
			<!-- <input type="search" class="footer-input" placeholder="想说点什么" maxlength="140"> -->
			<!-- <div class="footer-icon"></div>
			<div class="footer-icon"></div>
			<div class="footer-icon"></div> -->
		<!-- </footer> -->
		<div class="footer-zhanwei"></div>
		<script type="text/javascript" src="js/jquery.flexText.js"></script>
		<script type="text/javascript">
		    $(function () {
		        $('.content').flexText();
		    });
			function skipBack() {
				window.history.back();
			}
			var myDate = new Date();
			//获取当前年
			var year=myDate.getFullYear();
			//获取当前月
			var month=myDate.getMonth()+1;
			//获取当前日
			var date=myDate.getDate();
			var h=myDate.getHours();       //获取当前小时数(0-23)
			var m=myDate.getMinutes();     //获取当前分钟数(0-59)
			if(m<10) m = '0' + m;
			var s=myDate.getSeconds();
			if(s<10) s = '0' + s;
			var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
			//查询评论
			$.ajax({
				url: communicationUrl,
				type: 'post',
				data: {
					goodid: id
				},
				success: function(e) {
					console.log(e)
					if(e.sta_commentary == 'ok'){
						
						
						var eHtml = "";
						var data = e.vo_commentary;
						for(var i=0;i<data.length;i++){
							
							eHtml += '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+logoinfo.name+' :</a> <span class="my-pl-con">&nbsp;'+ data[i].info +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left">赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
							
						}
						//动态创建评论模块
						// if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
							
						    $('.plBtn').parents('.reviewArea ').siblings('.comment-show').prepend(eHtml);
						    $('.plBtn').siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
						// }
					}
					
				},
				error: function(error) {
					console.log(error)
				}
			})
		</script>
		<!--textarea限制字数-->
		<script type="text/javascript">
		    function keyUP(t){
		        var len = $(t).val().length;
		        if(len > 139){
		            $(t).val($(t).val().substring(0,140));
		        }
		    }
		</script>
		<!--点击评论创建评论条-->
		<script type="text/javascript">
		    $('.commentAll').on('click','.plBtn',function(){
				//获取输入内容
				var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
					
				if(oSize !== ''){
					$.ajax({
						url: addCommunicationUrl,
						type: 'post',
						data: {
							goodid: id,
							userid : logoinfo.id ,
							type : 2,
							info : oSize
						},
						success: function(data) {
							var eHtml = "";
							eHtml += '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="../../my/img/userphone.jpg" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+logoinfo.name+' :</a> <span class="my-pl-con">&nbsp;'+ data.info +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left">赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
							if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
							    $('.plBtn').parents('.reviewArea ').siblings('.comment-show').prepend(eHtml);
							    $('.plBtn').siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
							}
						},
						error: function(error) {
							console.log(error)
						}
					})
				}
				
		        
		        
				
				
		        
		    });
		</script>
		<!--点击回复动态创建回复块-->
		<script type="text/javascript">
		    $('.comment-show').on('click','.pl-hf',function(){
		        //获取回复人的名字
		        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
		        //回复@
		        var fhN = '回复@'+fhName;
		        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
		        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" style="width:100%" placeholder="" οnkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
		        //显示回复
		        if($(this).is('.hf-con-block')){
		            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
		            $(this).removeClass('hf-con-block');
		            $('.content').flexText();
		            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
					$(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('width','100%');
		            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
		            //input框自动聚焦
		            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
		        }else {
		            $(this).addClass('hf-con-block');
		            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
		        }
		    });
		</script>
		<!--评论回复块创建-->
		<script type="text/javascript">
		    $('.comment-show').on('click','.hf-pl',function(){
		        var oThis = $(this);
		        //获取输入内容
		        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
		        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
		        var oAllVal = '回复@'+oHfName;
		        if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){
		
		        }else {
		            $.getJSON("json/pl.json",function(data){
		                var oAt = '';
		                var oHf = '';
		                $.each(data,function(n,v){
							console.log(data)
		                    // delete v.hfContent;
		                    // delete v.atName;
		                    var arr;
		                    var ohfNameArr;
		                    if(oHfVal.indexOf("@") == -1){
		                        data['atName'] = '';
		                        data['hfContent'] = oHfVal;
		                    }else {
		                        arr = oHfVal.split(':');
		                        ohfNameArr = arr[0].split('@');
		                        data['hfContent'] = arr[1];
		                        data['atName'] = ohfNameArr[1];
		                    }
		
		                    if(data.atName == ''){
		                        oAt = data.hfContent;
		                    }else {
		                        oAt = '回复<a href="#" class="atName">@'+data.atName+'</a> : '+data.hfContent;
		                    }
		                    oHf = data.hfName;
		                });
		
		                var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">'+logoinfo.name+' : </a><span class="my-pl-con">'+oAt+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left">赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
		                oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
		            });
		        }
		    });
		</script>
		<!--删除评论块-->
		<script type="text/javascript">
		    $('.commentAll').on('click','.removeBlock',function(){
		        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
		        if(oT.siblings('.all-pl-con').length >= 1){
		            oT.remove();
		        }else {
		            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
		            oT.remove();
		        }
		        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();
		
		    })
		</script>
		<!--点赞-->
		<script type="text/javascript">
		    $('.comment-show').on('click','.date-dz-z',function(){
		        var zNum = $(this).find('.z-num').html();
		        if($(this).is('.date-dz-z-click')){
		            zNum--;
		            $(this).removeClass('date-dz-z-click red');
		            $(this).find('.z-num').html(zNum);
		        }else {
		            zNum++;
		            $(this).addClass('date-dz-z-click');
		            $(this).find('.z-num').html(zNum);
		        }
		    })
		</script>
	</body>
</html>
weixin_44134551
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
分享67套基于Java开发的Java毕业设计实战项目(含源码+毕业论文)【新星计划】
web18224617243的博客
06-21 1426
【新星计划】分享67套基于Java开发的Java毕业设计实战项目(含源码+毕业论文)本文中的所有主题都来自互联网。如果您侵犯您的权利，请及时联系Blogger，博主将及时处理。战神快速排名小编分享的Java毕业设计文件里所使用的Java语言和系统使用不一定准确和全面，我只是粗略浏览，具体使用多用技术来建议参考。各种各样的Java毕业设计不一定是完美的，建议看到几个，选择其中一个感觉良好，用来做Java毕业设计。论文可以参考，但是不建议直接照搬，因为毕竟要查重。以下内容由战神快速排名小编网络整理发布。提示：以
jQuery评论回复源码
09-03
jQuery评论回复源码。利用Ajax实现无刷新评论回复，类似微博、贴吧这样的回复。
jq用户评论点击回复简单代码。
weixin_33742618的博客
08-22 538
类似这种镶套回复评论： <div> <ul> <!--一条评论 begin--> <li> <div class="user-column"> <div class="user-reply"> ...
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整无限嵌套评论（超实用）轻松搞定贴吧嵌套评论功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手入门超简单
最新发布
南北极之间
06-16 603
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
jQuery实现用户评论留言代码
10-08
jQuery实现用户评论留言代码　
jquery:简单的wordpress评论回复功能
hi__world
10-31 524
[url=http://www.54173.cn/blog/?p=475]jquery:简单的wordpress评论回复功能[/url] 在最近接触了jQuery一段时间之后，受启发于记忆中当年百度贴吧弱弱的回复功能，试着做了一个用jQuery实现的。 功能是间接地实现了，当然还是有很多的不足，毕竟只是前台页面的一些小动作，效果当然无法与真正的回复嵌套相媲美了。反过来说它只用了jQu...
jq实现评论功能
m0_56264588的博客
09-15 327
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>实现评论功能</title> <metacharset="utf-8"/> </head> <body> <textareacols="20"r...
jQuery评论插件文章评论回复代码
12-25
3. 动态添加评论：新评论可以通过在评论列表的末尾添加新的`<li>`元素来实现。每个评论可以是一个包含评论内容、作者信息等的模板。 三、评论回复功能 1. 回复按钮：在每个评论项旁边添加回复按钮，点击后显示回复...
仿微信朋友圈评论
11-09
微信的评论功能还有许多动态效果，如加载动画、点赞动画等，这些都是提升用户体验的重要部分。可以使用Android的动画框架来实现这些效果。 通过以上步骤，可以实现一个基本的仿微信朋友圈评论功能。在实际开发中，...
基于jquery实现可定制的web在线富文本编辑器附源码下载
11-25
它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器，具有轻量，可定制，注重用户体验等特点，允许自由使用和修改代码，适用于前台快速简单回复框或后台内容编辑器。 在线预览 源码...
Python Flask个人博客源码
a4demon的博客
10-10 3082
没有写html模板继承，有时间再补吧，或者感兴趣的自己抽取一下 博客演示站点：http://www.7z1.xyz/ 如出现未备案，请直接访问：http://119.23.230.6/ 后台管理地址：/admin/login 账号：admin 密码：admin 前端代码链接:https://pan.baidu.com/s/1EDDD_ct4eYgxOlpzZw7IVA 密码:bgc2 解压密...
仿QQ空间说说 评论/回复 效果源码
09-15
仿QQ空间说说/微信 实现评论/回复功能 效果源码。二级ListView
点评系统源码
06-28
完整的点评系统玩站源码，PHP语言编写，带数据库，希望对您有用
PHP点评系统（开源代码）
04-24
开源代码，学习无忧，可通过源码学习PHP开发的具体细节，适用于初学PHP语言的学者。
jsp论坛源代码的（实现留言，回复）
04-23
jap实现的网站论坛的源代码，留言，回复等功能，希望多多支持啊。
仿淘宝评价打分源码
12-31
仿淘宝对交易评价打分源码,非常好用。为啥一定要描述20字?
php精美评论源码,php无限级评论嵌套实例介绍-PHP源码
weixin_29124971的博客
03-31 374
/*** 按ID条件从评论数组中递归查找**/function getCommentsFromAryById($commtAry, $id){if ( !is_array($commtAry) ) return FALSE;foreach($commtAry as $key=>$value) {if ( $value['id'] == $id ) return $value;if ( iss...
jQuery 无刷新评论
weixin_33857230的博客
06-14 215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
基于jQuery+bootstrap的评论回复功能
reg183的专栏
03-17 2059
效果如下： 主要代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>评论插件</title> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> <link rel="stylesheet" type="text/
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值