<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
<style>
span {
margin-left: 20px;
}
</style>
</head>
<body>
<ul></ul>
<script>
var arr = [
{
title: "今天",
name: "weilai",
},
{
title: "明天",
name: "shenqi",
},
{
title: "后天",
name: "houtin",
},
];
init(); /* 执行init函数 */
function init() {
let li1 = document.querySelectorAll("li"); /* 获取所有li标签 */
if (li1.length >= 0)
li1.forEach((item) =>
item.remove()
); /* 重新渲染时 如果li存在 就将所有li标签删除 */
for (var i = 0; i < arr.length; i++) {
/* 循环遍历arr数组 */
var ul = document.querySelector("ul"); /* 获取ul标签 */
var li = document.createElement("li"); /* 生成li标签 */
li.innerHTML =
arr[
i
].title; /* 将arr的第i项的title属性的值添加到li标签里 || 给li标签添加内容 */
ul.appendChild(li); /* 将li标签放置在ul标签内 */
var span = document.createElement("span"); /* 生成span标签 */
span.innerHTML =
"X"; /* 将字符“X”添加在span标签里 ||给span标签添加内容 */
li.appendChild(span); /* 将span标签放置在li标签内 */
span.index = i; /* 给span标签添加index属性 index的属性值是i */
span.addEventListener("click", handle); /* span的点击事件 */
}
}
function handle(e) {
/* 点击span触发函数handle */
arr.splice(
e.target.index,
1
); /* 删除arr的第i项 e.target.index的值就是 第42行span.index的值 ||指定删除 */
init(); /* 重新执行init 重新渲染 */
}
</script>
</body>
</html>
7401
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
