編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識(shí)，實(shí)現(xiàn)網(wǎng)頁留言的編輯功能，每條留言中都會(huì)帶有一個(gè)編輯按鈕，點(diǎn)擊編輯按鈕的時(shí)候，可以對(duì)相應(yīng)留言內(nèi)容進(jìn)行編輯。
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能，否則，請(qǐng)重復(fù)學(xué)習(xí)此節(jié)內(nèi)容。
任務(wù)
一、為每個(gè)編輯按鈕按鈕添加點(diǎn)擊事件，記錄當(dāng)前編輯的節(jié)點(diǎn)，并更新輸入框狀態(tài)。
提示:
1. 取得當(dāng)前編輯按鈕的父節(jié)點(diǎn)
2. 把父節(jié)點(diǎn)保存在變量cur
3. 把父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)的內(nèi)容寫入輸入框
4. 顯示輸入框
二、輸入框確定按鈕添加點(diǎn)擊事件，把輸入框的內(nèi)容更新到當(dāng)先編輯的節(jié)點(diǎn)。
提示:
1. 取得輸入框的內(nèi)容
2. 如果內(nèi)容為空，則返回
3. 把cur的第一個(gè)子節(jié)點(diǎn)的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é)點(diǎn)
var cur;
// 遍歷編輯按鈕，添加點(diǎn)擊事件，把當(dāng)前父節(jié)點(diǎn)存入變量cur, 并顯示輸入框
// 輸入框確定按鈕添加點(diǎn)擊事件，把輸入框的內(nèi)容更新到當(dāng)先編輯的節(jié)點(diǎn)
}
</script>
</head>
<body>
<ul id="list">
<li><span>評(píng)論1</span><button>編輯</button></li>
<li><span>評(píng)論2</span><button>編輯</button></li>
<li><span>評(píng)論3</span><button>編輯</button></li>
<li><span>評(píng)論4</span><button>編輯</button></li>
</ul>
<div id="edit" style="display: none">
<textarea id="text"></textarea>
<button id="ok">確定</button>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
