读书人

javascript求解解决办法

发布时间: 2013-02-06 14:02:21 作者: rapoo

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

热点推荐