<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基础——修改文本框的值(函数传参)</title>
<style>
*{ padding: 0; margin: 0;}
body{ font-size: 12px; color: #333; background: #fff;}
li{ list-style: none;}
a{ text-decoration: none; color: #333;}
#cate{ width: 300px; margin: 40px auto; border: 1px solid #f70;}
#cate h3{ font-size: 14px; height: 30px; line-height: 30px; text-align: center; background: #f80; color: #fff;}
#cate li{ padding-left: 10px; border-top: 1px solid #f90;}
.show ,.edit{ height: 40px; line-height: 40px;}
.show span{ float: left; margin-right: 10px;}
.show a{ display: inline-block; width: 16px; height: 16px; background: url(img/edit.png) no-repeat; text-indent: -9999px; margin-top: 10px; position: absolute; right: 10px;}
.show{ position: relative;}
.edit{ display: none;}
.edit input{ background: #fff; border: 1px solid #ccc; height: 20px; line-height: 20px; padding: 2px 5px; outline: none;}
.edit a{ background: #999; color: #fff; padding: 5px 6px; border-radius: 2px;}
.edit a.cancel{ background: #aaa; -webkit-transition: all .3s; transition: all .3s;}
.edit a.save{ background: #22ac38; -webkit-transition: all .3s; transition: all .3s;}
.edit a.cancel:hover{ background: #999;}
.edit a.save:hover{ background: #19952e;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
// 函数传参
function changeValue(oLi){
var aDiv = oLi.getElementsByTagName('div');
var oSpan = oLi.getElementsByTagName('span')[0];
var aA = oLi.getElementsByTagName('a');
var oInput = oLi.getElementsByTagName('input')[0];
// 点击铅笔编辑
aA[0].onclick = function(){
aDiv[0].style.display = 'none';
aDiv[1].style.display = 'block';
oInput.value = oSpan.innerHTML;
};
// 点击保存
aA[1].onclick = function(){
aDiv[0].style.display = 'block';
aDiv[1].style.display = 'none';
oSpan.innerHTML = oInput.value;
};
// 点击取消
aA[2].onclick = function(){
aDiv[0].style.display = 'block';
aDiv[1].style.display = 'none';
};
};
// 函数调用
for(var i=0; i<aLi.length; i++){
changeValue(aLi[i]);
}
};
</script>
</head>
<body>
<div id="cate">
<h3>修改文本框的值</h3>
<ul id="list">
<li>
<div class="show">
<span>龟派气功波</span>
<a href="#">编辑</a>
</div>
<div class="edit">
<input type="text" />
<a class="save" href="#">保存</a>
<a class="cancel" href="#">取消</a>
</div>
</li>
<li>
<div class="show">
<span>十倍界王拳</span>
<a href="#">编辑</a>
</div>
<div class="edit">
<input type="text" />
<a class="save" href="#">保存</a>
<a class="cancel" href="#">取消</a>
</div>
</li>
<li>
<div class="show">
<span>超级元气弹</span>
<a href="#">编辑</a>
</div>
<div class="edit">
<input type="text" />
<a class="save" href="#">保存</a>
<a class="cancel" href="#">取消</a>
</div>
</li>
</ul>
</div>
</body>
</html>
