jquery仿新浪微博评论回复交互表单代码资源-CSDN下载

共7个文件

css：2个

png：2个

js：2个

jquery

2星需积分: 42 132 浏览量 2018-08-07 10:27:41 上传评论 2 收藏 47KB RAR 举报

在本文中，我们将深入探讨如何使用jQuery实现一个仿新浪微博的评论和回复交互表单功能。这个功能是网页社交互动中的重要组成部分，它允许用户轻松地发表评论、回复其他用户的评论，提升用户在网站上的参与度。我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等任务。在本项目中，我们将主要利用jQuery的DOM操作和事件监听功能。 1. **DOM操作**：在实现评论和回复表单时，我们需要对HTML元素进行动态创建和修改。例如，当用户提交评论后，我们可以通过`$(selector).append()`方法将新的评论项插入到评论列表中。同时，利用`$(selector).html()`或`$(selector).text()`可以改变特定元素的文本内容。 2. **事件处理**：jQuery的`.on()`方法用于绑定事件监听器。在我们的案例中，可能需要监听`click`事件（当用户点击评论或回复按钮时）和`submit`事件（当用户提交表单时）。例如： ```javascript $('#comment-form').on('submit', function(event) { event.preventDefault(); // 阻止默认表单提交行为 // 提交表单逻辑 }); $('#reply-button').on('click', function() { // 回复按钮点击后的逻辑 }); ``` 3. **数据处理**：在用户提交评论或回复时，我们需要收集表单数据。这通常通过获取表单元素的值来完成，如`$('#comment-input').val()`。数据处理后，可能需要发送Ajax请求到服务器，使用`$.ajax()`或`$.post()`方法： ```javascript $.ajax({ url: 'submit_comment.php', type: 'POST', data: { comment: $('#comment-input').val() }, success: function(response) { // 处理服务器返回的数据 } }); ``` 4. **动画效果**：为了提升用户体验，我们可以添加一些简单的动画效果。比如，当新评论添加到列表时，可以使用`.fadeIn()`或`.slideToggle()`方法使其平滑显示。此外，`setTimeout`函数可用于延迟执行某些操作，如延迟加载或显示提示信息。 5. **界面交互设计**：在仿新浪微博的评论表单中，用户应能清楚地看到他们正在回复哪条评论。这可能需要通过改变CSS样式或者添加提示信息来实现。例如，当用户选择回复某条评论时，该评论可以高亮显示，同时回复框自动填充被回复用户的用户名。 6. **表单验证**：为了确保数据的质量，我们需要在客户端进行基本的表单验证，例如检查评论内容是否为空。可以使用`.trim()`去除前后空白，并结合`if`语句进行判断。使用jQuery实现仿新浪微博的评论回复交互表单涉及DOM操作、事件监听、数据处理、动画效果以及良好的用户界面设计。通过熟练掌握这些技巧，你可以创建出一个功能完备且用户体验优秀的评论系统。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery仿新浪微博评论回复交互表单代码.rar （7个子文件）

jQuery仿新浪微博评论回复交互表单代码

css

comment.css 4KB

style.css 3KB

images

icon-all_01.png 2KB

header-img-comment_03.png 3KB

index.html 10KB

jquery-1.12.0.min.js 144KB

jquery.flexText.js 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery仿新浪微博评论回复交互表单代码</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/comment.css"> </head> <body><script src="/demos/googlegg.js"></script>  <div class="commentAll">  <div class="reviewArea clearfix"> <textarea class="content comment-input" placeholder="Please enter a comment…" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="plBtn">评论</a> </div>   <div class="comment-show"> <div class="comment-show-con clearfix"> <div class="comment-show-con-img pull-left"><img src="images/header-img-comment_03.png" 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"> 来啊造作啊!</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="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div> <div class="hf-list-con"></div> </div> </div> </div>  </div> <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/jquery.flexText.js"></script>  <script type="text/javascript"> $(function () { $('.content').flexText(); }); </script>  <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 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; //获取输入内容 var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val(); console.log(oSize); //动态创建评论模块 oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="images/header-img-comment_03.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">David Beckham : </a> <span class="my-pl-con"> '+ oSize +'</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="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>'; if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){ $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml); $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text(''); } }); </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" placeholder="" onkeyup="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'); //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 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; //获取输入内容 var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val(); console.log(oHfVal) 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){ 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.hfCo

评论收藏

内容反馈