可编辑内容框普通写法
<!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>
* {
margin: 0;
padding: 0;
font-family: Microsoft yahei, serif;
}
li {
list-style: none;
}
#box ul li {
height: 50px;
padding-left: 50px;
line-height: 50px;
font-size: 12px;
border-bottom: 1px solid red;
}
#box ul li span {
float: left;
}
#box ul li input {
display: none;
float: left;
margin-top: 14px;
color: #999;
}
#box ul li p {
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
margin-top: 12px;
margin-left: 10px;
background-color: #000;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<span>点击修改</span>
<input type="text" value="input1点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input2点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input3点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input4点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input5点击修改">
<p>修改</p>
</li>
</ul>
</div>
<script>
//获取元素
let oBox = document.getElementById('box')//先获取box提高性能，后面的获取可以使用oBox往内就可以
let aP = [...oBox.querySelectorAll('ul li p')]//变成数组，forEach操作数组就不用for循环和定义len了
let aSpan = oBox.querySelectorAll('ul li span')
let aInput = oBox.querySelectorAll('ul li input')
console.log(oBox, aP, aSpan, aInput);
//批量绑定事件
aP.forEach((oP, index) => {
oP.onclick = function () {
//一个按钮做两件事情，要摸修改要么确定
if (this.innerHTML === '修改') {
aInput[index].value = aSpan[index].innerHTML//对应的span获取值给input的value
//span隐藏input显示
aSpan[index].style.display = 'none';
aInput[index].style.display = 'block';
this.innerHTML = '确认'
} else {
aSpan[index].innerHTML = aInput[index].value
aSpan[index].style.display = 'block';
aInput[index].style.display = 'none';
this.innerHTML = '修改'
}
}
})
</script>
</body>
</html>
可编辑内容框优化写法
<!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>
* {
margin: 0;
padding: 0;
font-family: Microsoft yahei, serif;
}
li {
list-style: none;
}
#box ul li {
height: 50px;
padding-left: 50px;
line-height: 50px;
font-size: 12px;
border-bottom: 1px solid red;
}
#box ul li span {
float: left;
}
#box ul li input {
display: none;
float: left;
margin-top: 14px;
color: #999;
}
#box ul li p {
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
margin-top: 12px;
margin-left: 10px;
background-color: #000;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<span>点击修改</span>
<input type="text" value="input1点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input2点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input3点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input4点击修改">
<p>修改</p>
</li>
<li>
<span>点击修改</span><input type="text" value="input5点击修改">
<p>修改</p>
</li>
</ul>
</div>
<script>
//获取元素
let oBox = document.getElementById('box')
let aP = [...oBox.querySelectorAll('ul li p')]
let aSpan = oBox.querySelectorAll('ul li span')
let aInput = oBox.querySelectorAll('ul li input')
console.log(oBox, aP, aSpan, aInput);
//span始终不变，变的是input，通过信号量，信号量（变量）跟页面上显示的‘点击修改’一致
let str = '点击修改'
//批量绑定事件
aP.forEach((oP, index) => {
oP.onclick = function () {
if (this.innerHTML === '修改') {
aInput[index].value = str;
aSpan[index].style.display = 'none';
aInput[index].style.display = 'block';
this.innerHTML = '确认'
} else {
aSpan[index].innerHTML = Input[index].value
aSpan[index].style.display = 'block';
aInput[index].style.display = 'none';
this.innerHTML = '修改'
}
}
})
</script>
</body>
</html>
网友评论