工作中重復(fù)的功能模塊先刪除，簡化，第一個模塊實(shí)現(xiàn)了，后面的循環(huán)就可以
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<style>
????????li?{
????????????height:?30px;
????????????line-height:?30px;
????????}
????????.edit?{
????????????display:?none;
????????}
????</style>
</head>
<body>
<ul?id="list">
????<li>
????????<p><span?class="inner">這是第一個列表</span><a?href="javascript:;"?class="btn">修改</a></p>
????????<div?class="edit">
????????????<input?type="text"?value="這是第一個列表"?class="txt"?/>
????????????<button?class="edit-btn">確定</button>
????????</div>
????</li>
????<li>
????????<p><span?class="inner">這是第一個列表</span><a?href="javascript:;"?class="btn">修改</a></p>
????????<div?class="edit">
????????????<input?type="text"?value="這是第一個列表"?class="txt"?/>
????????????<button?class="edit-btn">確定</button>
????????</div>
????</li>
????<li>
????????<p><span?class="inner">這是第一個列表</span><a?href="javascript:;"?class="btn">修改</a></p>
????????<div?class="edit">
????????????<input?type="text"?value="這是第一個列表"?class="txt"?/>
????????????<button?class="edit-btn">確定</button>
????????</div>
????</li>
</ul>
<script>
/*
????1.?找到?btn
????2.?btn?添加點(diǎn)擊事件
????????1.?隱藏?p?標(biāo)簽，顯示?edit
????????2.?讓?txt?的value?=?inner的內(nèi)容
????3.?edit-btn?添加點(diǎn)擊事件
????????1.?校驗(yàn)?txt?的value?不能為空
????????2.?讓?inner的內(nèi)容?=?txt?的value
????????3.?顯示?p?標(biāo)簽，隱藏?edit
*/
var?lis?=?document.querySelectorAll("#list?li");
for(var?i?=?0;?i?<?lis.length;?i++){
????fn(lis[i]);
}
function?fn(li){
????var?p?=?li.querySelector("p");
????var?btn?=?li.querySelector(".btn");
????var?edit?=?li.querySelector(".edit");
????var?txt?=?li.querySelector(".txt");
????var?inner?=?li.querySelector(".inner");
????var?editBtn?=?li.querySelector(".edit-btn")
????btn.onclick?=?function(){
????????p.style.display?=?"none";
????????edit.style.display?=?"block";
????????txt.value?=?inner.innerHTML;
????};
????editBtn.onclick?=?function(){
????????//?字符串轉(zhuǎn)布爾值?""?false???非空字符串?true
????????if(!txt.value){//校驗(yàn)不能為空
????????????alert("請輸入內(nèi)容")
????????}?else?{
????????????inner.innerHTML?=?txt.value;
????????????p.style.display?=?"block";
????????????edit.style.display?=?"none";
????????}
????};
}
</script>????
</body>
</html>
