小说列表（添加、删除、修改）

最新推荐文章于 2024-10-07 09:24:46 发布

咔咔库奇

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量247

点赞数 2

分类专栏：前端基础文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64455070/article/details/139434968

版权

前端基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	小说 ：<input type="text">
	<button>添加</button>
	<ul>
		<!-- <li><span>xxxxxx</span><button></button></li> -->
	</ul>	
	<script type="text/javascript">
	let inp = document.querySelector("input")
	// 输入框的节点
	let btn = document.querySelector("button")
	// button 的节点
	let flag = false; //当中判断条件 true 代表编辑 false 代表添加
	// 添加
	btn.onclick = function (){
			if(inp.value === ""){
				alert("请输入内容后确定");
				return;
			}
			// xxx
			if(flag === false){
					// 现在是添加
					let ul = document.querySelector("ul");
					// 获取父级节点
					let li = document.createElement("li");
					// 创建li
					let span = document.createElement("span")
					// 创建span
					let button = document.createElement("button")
					// 创建button

					span.innerText = inp.value;
					// 给span 添加文本 

					// 绑定 点击删除
					span.onclick = function (){
						// this === 点击的哪一个span
						this.parentNode.remove();
						// 删除当前点击的span的父级
					}
					button.innerText = "编辑";
					// 点击编辑
					button.onclick = function (){
						flag = true; 
						// 将现在的按钮状态改为 编辑
						btn.innerText = "修改";
						// 将添加按钮的文本改为修改
						inp.value = this.previousElementSibling.innerText;
						// 将需要修改的文本 回显到输入框
		
						if(document.querySelector(".active") != null){
							// 这里if 因为第一次进入该页面 谁都没有 .active 
							document.querySelector(".active").className = "";
							// 清空特殊类名
						}
						this.className = "active";
						// 给点击的button 添加特殊标记类名 用来标记编辑的是哪个
					}
					// 将输入框中的文本赋值给 span
					li.appendChild(span);
					li.appendChild(button);
					ul.appendChild(li);
					inp.value = ""; 

			}else{
				// 修改
				// act 作用就是为了标记我最后点击的那一条数据的编辑
				let act = document.querySelector(".active");
				// 获取刚刚点击编辑的节点
				act.previousElementSibling.innerText = inp.value;
				// 将输入框中的内容 赋值给 点击编辑的span
				inp.value = "";
				// 清空输入框中的内容
				flag = false;
				// 将按钮状态 还原为 添加
				btn.innerText = "添加";
				// 将按钮的文本还原为添加 
				
				console.log("我是编辑")
			}
			// 清空输入框内容
	}
	</script>
</body>
</html>