vue仿微博评论回复_js模拟回帖/微博评论功能案例

学习目的:实现在dom上的增删操作;

案例:模拟回帖/微博评论功能案例;

评论回复

* {

margin: 0;

padding: 0;

list-style: none;

}

#box {

width: 800px;

border: 1px solid #cccccc;

margin: 100px auto;

padding: 30px;

}

#my_textarea {

width: 80%;

height: 150px;

}

.box-top {

margin-bottom: 30px;

}

#reply {

margin: 0 80px;

}

#reply li {

border-bottom: 1px dashed #cccccc;

color: red;

line-height: 44px;

}

#reply li a {

float: right;

}

发表评论:

发表

window.onload = function () {

//封装id获取操作

function $(id) {

return typeof id === "string" ? document.getElementById(id) : null;

}

//发表按钮点击

$("comment").onclick = function () {

//获取输入的内容

var content = $("my_textarea").value;

//判断为空

if (content.length === 0) {

alert("请输入评论的内容!");

return;

} else {

var li = document.createElement("li");

li.innerHTML = content + '删除';//动态处理a标签

$("reply").appendChild(li);//在ul中添加li

//清除输入框

$("my_textarea").value = "";

}

//删除操作

//获取li中所有链接a元素

var liList = $("reply").getElementsByTagName("a");

//遍历拿到每个"删除"标签

for (var i = 0; i < liList.length; i++) {

var a = liList[i];

a.onclick = function () {

//删除父元素li

this.parentNode.remove();

}

可以注意到此时删除操作是在发表操作的区域块中的

在案例过程中,我一开始把删除评论操作和发表评论操作并列的放在一起,因为我觉得这是两个独立的地位相等的操作.

但是执行起来,删除操作并没有效果,原因是在发表操作区域中添加的li元素在删除区域中获取不到,评论的次数决定了删除的个数,决定了遍历数组的长度,如果在删除操作之前就结束了代码块,作用域是传不到删除操作代码块中的.

vue仿微博评论回复_js模拟回帖/微博评论功能案例相关推荐

php无限评论回复_php如何制作无限级评论功能？
php如何制作无限级评论功能? 发布时间:2020-05-20 11:18:47 来源:亿速云阅读:198 作者:Leah php如何制作无限级评论功能?这篇文章运用了实例代码展示,代码非常详细,可 ...
Vue钩子函数mounted实现进入页面立即查询的功能案例
Vue的钩子函数:当执行到某一阶段就会执行的方法/函数.就相当于spring中bean的生命周期一样.
Java单表实现评论回复功能
Java单表实现评论回复功能 1.简介 2.功能实现图 3.数据库设计 4.实体类 5.实现思路 6.功能实现 6.1 Sql入手 6.2 业务实现 7.前端实现 8.最终成果 1.简介最近在写毕业 ...
微信小程序内容评论-回复评论-回复回复的实现（纯前端）
wxml  <view class="container"> < ...
评论回复功能的设计与实现
评论回复功能的数据库设计可以分开设计成两张表,评论表和回复表,也可以将其设计为一张表,我采用的是一张表评论回复表的相关字段(我做的是商品goods下的评论回复) 字段解释: gc_id:评论回复表i ...
java仿qq空间音乐播放_完美实现仿QQ空间评论回复特效
评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用www.cppcns.com户可以修改@. 新浪微博则是在这 ...
android 仿好友动态回复,仿微信评论回复(简易)
简单的微信评论回复功能先说说大概逻辑,一个控制器里添加列表(类似朋友圈的每条动态),每个动态里面再添加一个列表(用来显示所有评论以及点击回复评论),都是用Masonry布局加HYBMasonryAu ...
Android 朋友圈之评论回复列表
转载请注明出处:http://blog.csdn.net/lv_fq/article/details/77836700 – [发强博客] 系列博客 Android 朋友圈之多图显示 Android 朋 ...
Vue仿饿了么app项目总结
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...
vue仿饿了么点餐手机端
vue仿饿了么点餐手机端模板,包括评论,商品,商家模块,添加商品到购物车,左侧分类计数功能,右侧滑动时分类有上推功能,小球飞入购物车功能.

vue仿微博评论回复_js模拟回帖/微博评论功能案例

vue仿微博评论回复_js模拟回帖/微博评论功能案例相关推荐

最新文章

热门文章