編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，實現(xiàn)網(wǎng)頁留言的編輯功能，每條留言中都會帶有一個編輯按鈕，點擊編輯按鈕的時候，可以對相應(yīng)留言內(nèi)容進行編輯。
溫馨提示:完成任務(wù)后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能，否則，請重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
任務(wù)
一、為每個編輯按鈕按鈕添加點擊事件，記錄當(dāng)前編輯的節(jié)點，并更新輸入框狀態(tài)。
提示:
1. 取得當(dāng)前編輯按鈕的父節(jié)點
2. 把父節(jié)點保存在變量cur
3. 把父節(jié)點的第一個子節(jié)點的內(nèi)容寫入輸入框
4. 顯示輸入框
二、輸入框確定按鈕添加點擊事件，把輸入框的內(nèi)容更新到當(dāng)先編輯的節(jié)點。
提示:
1. 取得輸入框的內(nèi)容
2. 如果內(nèi)容為空，則返回
3. 把cur的第一個子節(jié)點的innerHTML改為輸入框內(nèi)容
4. 隱藏輸入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
#list {
list-style: none;
width: 400px;
border: 1px solid #666666;
}
li {
list-style: none;
background: #a7cbff;
margin: 10px 0;
height: 30px;
position: relative;
}
li button {
display: none;
position: absolute;
right: 3px;
top: 3px;
}
li:hover button {
display: inline-block;
}
textarea {
display: block;
width: 400px;
height: 50px;
margin: 10px 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 獲取元素
var lis = document.getElementById('list').getElementsByTagName('li');
var text = document.getElementById('text');
var ok = document.getElementById('ok');
var edit = document.getElementById('edit');
// 當(dāng)前編輯的節(jié)點
var cur;
// 遍歷編輯按鈕，添加點擊事件，把當(dāng)前父節(jié)點存入變量cur, 并顯示輸入框
// 輸入框確定按鈕添加點擊事件，把輸入框的內(nèi)容更新到當(dāng)先編輯的節(jié)點
}
</script>
</head>
<body>
<ul id="list">
<li><span>評論1</span><button>編輯</button></li>
<li><span>評論2</span><button>編輯</button></li>
<li><span>評論3</span><button>編輯</button></li>
<li><span>評論4</span><button>編輯</button></li>
</ul>
<div id="edit" style="display: none">
<textarea id="text"></textarea>
<button id="ok">確定</button>
</div>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
