<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
margin-bottom: 10px;
}
/* .box{
display: none;
} */
.box2 {
display: none;
/* display: block; */
}
input {
width: 160px;
height: 15px;
}
.box span:nth-child(2) {
text-decoration: underline;
color: #352fb8;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
<li>
<div class="box">
<span>JavaScript权威指南</span> <span>编辑</span>
</div>
<div class="box2">
<input type="text" value="JavaScript权威指南">
<span class="a1">保存</span>
<span class="a1">取消</span>
</div>
</li>
</ul>
<script>
// var oBox = document.getElementsByClassName("box")[0];
// var oSpan = oBox.getElementsByTagName("span");
// var oBox2 = document.getElementsByClassName("box2")[0];
// var a1 = oBox2.getElementsByClassName("a1");
// var inp = oBox2.getElementsByTagName("input")[0];
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
add(list[i]);
}
function add(parent) {
var oBox = parent.getElementsByClassName("box")[0];
var oSpan = parent.getElementsByTagName("span");
var oBox2 = parent.getElementsByClassName("box2")[0];
var a1 = parent.getElementsByClassName("a1");
var inp = parent.getElementsByTagName("input")[0];
oSpan[1].onclick = function () {
oBox.style.display = "none"
oBox2.style.display = "block"
}
a1[0].onclick = function () {
oBox.style.display = "block"
oBox2.style.display = "none"
oSpan[0].innerHTML = inp.value
}
a1[1].onclick = function () {
oBox.style.display = "block"
oBox2.style.display = "none"
}
}
</script>
</body>
</html>