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元素在删除区域中获取不到,评论的次数决定了删除的个数,决定了遍历数组的长度,如果在删除操作之前就结束了代码块,作用域是传不到删除操作代码块中的.