点击前
点击修改
修改后
<body>
<div class="wrap">
<ul>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
</ul>
</div>
<script type="text/javascript">
//获取各各的对象
var oWrap = document.getElementsByClassName( 'wrap' )[0],
aBtn = oWrap.getElementsByTagName( 'a' ),
aInp = oWrap.getElementsByTagName( 'input' ),
aSpan = oWrap.getElementsByTagName( 'span' ),
length = aBtn.length;
for(var i=0 ; i<length ; i++ ){
aBtn[i].num = i;
aBtn[i].bool = true; //自定义对象属性 为了存储各各的判断
aBtn[i].onclick = function (){
console.time(1)//测试运动过程总的花了多少时间
if( this.bool ){ //this指向点击那个div 判断点击那个div是true还是false
aInp[this.num].style.cssText = 'display: block';
aInp[this.num].focus(); //光标定位到input里
this.innerHTML = '确定';
} else {
aInp[this.num].style.cssText = 'display: none';
aSpan[this.num].innerHTML = aInp[this.num].value;
this.innerHTML = '修改';
}
aInp[this.num].value = aSpan[this.num].innerHTML;
this.bool = !this.bool;
console.timeEnd(1)//测试运动过程总的花了多少时间 放在有执行函数
}
}
</script>
</body>
封装的写法（以后经常用的写法）
<body>
<div class="wrap">
<ul>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
<li>
<span>点击修改</span>
<input type="text" name="text">
<a href="javascript:;">修改</a>
</li>
</ul>
</div>
<script type="text/javascript">
//获取各各的对象
var oWrap = document.getElementsByClassName( 'wrap' )[0],
aBtn = oWrap.getElementsByTagName( 'a' ),
aInp = oWrap.getElementsByTagName( 'input' ),
aSpan = oWrap.getElementsByTagName( 'span' ),
length = aBtn.length;
for(var i=0 ; i<length ; i++){
aBtn[i].index = i;
aBtn[i].onclick = function (){
var index = this.index;
console.time(1);
var bool = this.innerHTML === '修改';//判断是不是修改
eFn ( bool , index );
console.timeEnd(1);
}
}
//复用 封装
// 点击事件后处理的事件
function eFn ( b , c ){ //a对应bool b对应index
var b = b + 0; //把布尔值变成数字；true 变成1 false变成 0
var txt = [ aInp[c].value , aSpan[c].innerHTML ][b];//这里获取input 和 span里的值
aSpan[c].style.display = [ 'block' , 'none'][b];//b可能 1 0 这里可以取对应的数值
aInp[c].style.display = [ 'none' , 'block'][b];
aInp[c].value = txt;
aSpan[c].innerHTML = txt; //再把上面获取到的值给对应的span 或input
}
用数组取值来代替if判断，比if好，运动速度也比较快；
思路：获取判断的做判断，会返回一个布尔值，再对这个布尔值转化成 数字 ；
利用数组取值，0 或 1，取对应的值；
