javascript求解解决办法

2013-02-06

javascript求解scriptwindow.onloadfunction (){var aBtndocument.getElementsByTagName(input)var

javascript求解


<script>
window.onload=function ()
{
    var aBtn=document.getElementsByTagName('input');
    var oDiv=document.getElementsByClassName('div1');
    var i;
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index = i;
        //下面要注意
        aBtn[i].onclick=(function(_i){
            return function (){
                oDiv[_i].style.display='block';
            }
        })(i);
    };
};
</script>

javascript
[解决办法]
匿名函数立即执行
解决闭包的问题
防止oDiv[_i]中的_i为i最后的值+1
[解决办法]


window.onload=function (){
    var aBtn=document.getElementsByTagName('input');
    var oDiv=document.getElementsByClassName('div1');    
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index = i;
        //下面要注意
        aBtn[i].onclick=(function(_i){
            return function (){
//调用hideAll
hideAll();
                oDiv[_i].style.display='block';
            }
        })(i);
    };
};
//隐藏所有
function hideAll(){
    var oDiv=document.getElementsByClassName('div1');
for(var i = 0 ; i < oDiv.length ; ++i){
oDiv[i].style.display='none';
}
}

[解决办法]

window.onload=function ()
{
    var aBtn=document.getElementsByTagName('input');
    var oDiv=document.getElementsByClassName('div1');
    var i;
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index = i;
        //下面要注意
         
        aBtn[i].onclick=(function(_i){
            return function (){
for(var j=0; j<oDiv.length;++j){
oDiv[j].style.display='none';
}

                oDiv[_i].style.display='block';
            }
        })(i);
    };
};

[解决办法]
那是闭包的作用。
如果你写成：aBtn[i].onclick=function(){
        oDiv[i].style.display='block';
    }
你会发现，不管点击哪个都只有最后一个显示，换句话就是上面的代码都会变成：
aBtn[i].onclick=function(){
        oDiv[aBtn.length-1].style.display='block';
    }
i不会起作用了。

热点排行

JavaScript

javascript求解解决办法