JavaScript基础函数案例

点击前

点击修改

修改后

<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，取对应的值；

JavaScript基础 函数 案例

推荐阅读更多精彩内容

JavaScript基础函数案例