面向过程---面向对象

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huangwensu/article/details/52081336

1原生js代码

<div id="div1">
    <input class="active" type="button" value="测试"/>
    <input type="button" value="aaa"/>
    <input type="button" value="bbb"/>
    <div style="display:black;"></div>
</div>

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var aBtn = oDiv.getElementsByTagName("input");
        var aDiv = oDiv.getElementsByTagName("div");
        var i = 0;
        for(i=0;i<aBtn.length;i++){
            aBtn[i].index = 1;
            aBtn[i].onclick = function(){
                for(i=0;i<aBtn.length;i++){
                aBtn[i].className = '';
                aDiv[i].style.display = 'none';
            }
            this.className = 'active';
            aDiv[this.index].style.display = 'black';
        };
    }
}

</script>

2.所有的代码都在onload里面

 不能有函数嵌套,可以有全局变量

 onload改为构造函数,全局变量变为对象的属性,函数变为对象的方法

 改错this

<script type="text/javascript">
    var aBtn = null;
    var aDiv = null;
    window.onload = function(){
        var oTab = TabSwitch(div1);
    }
    function TabSwitch(id){
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName("input");
        this.aDiv = oDiv.getElementsByTagName("div");
        var i = 0;
        var _this = this;
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index = 1;
            this.aBtn[i].onclick = function(){ //套一层函数,改写this
                _this.tab(this);
            }
        }
    }

    TabSwitch.prototype.tab = function(oBtn){
        for(i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'black';
    };

</script>

 

展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页