<!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’);
// 当前编辑的节点
var cur;
var span;
// 遍历编辑按钮，添加点击事件，把当前父节点存入变量cur, 并显示输入框
var btn=document.getElementsByTagName(“button”);
// 遍历编辑按钮，添加点击事件，把当前父节点存入变量cur, 并显示输入框
for(var i=0,len=btn.length;i<len;i++){
btn[i].onclick=function(){
cur=this.parentNode;
text.value=cur.childNodes[0].innerHTML;
edit.style.display=”block”;
}
}
// 输入框确定按钮添加点击事件，把输入框的内容更新到当先编辑的节点
ok.onclick=function(){
var txt=text.value;
if(txt==””) return;
cur.childNodes[0].innerHTML=txt;
edit.style.display=”none”;
}
}
</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>
评论留言 继续编辑功能
No Comments