一个小小的变量值和读出的长度问题
0
悬赏园豆：20
[已解决问题]
解决于 2012-12-09 14:46
<style>
*{margin:0;padding:0;}
li{list-style:none;}
#div1{width:350px;height:60px;border:1px #000000 solid;position:relative;margin:0 auto;}
#div1 ul{position:absolute;left:0;}
#div1 ul li{width:80px;height:60px;margin-right:7px;float:left;background:blue;color:#fff;font-size:15px;font-weight:bold;text-align:center;line-height:60px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oInput=document.getElementById("input1");
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var oneSize=aLi[0].offsetWidth+7;
var iNum=4;
var bBtn=true;
function getWidth(){
oUl.style.width=aLi.length*oneSize+'px';
}
getWidth();
oInput.onclick=function(){
if(bBtn){
bBtn=false;
for(var i=0;i<iNum;i++){
var oLi=aLi[i].cloneNode(true);
oUl.appendChild(oLi);
getWidth();
}
for(var i=0;i<iNum;i++){//如果把这个iNum给换成aLi.length后他移除的是一组(1,2,3,4,5)而不是一个，这是怎么回事,变量和读出来的长度有什么区别
oUl.removeChild(aLi[0]);
oUl.style.left=0;
}
bBtn=true;
}
}
}
</script>
</head>
<body>
<input type="button" value="切换" id="input1"/>
<div id="div1">
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
最佳答案
0
aLi是一个动态变化的值，虽然 var aLi=oUl.getElementsByTagName('li');
你新增li到ul，或者你delete li 都会立即的反应出来，这样如果你用aLi.length，这个值也是一个动态变化的值。
这样，应该可以解决掉你的疑问。
for(var i=0;i<aLi.length;i++){//如果把这个iNum给换成aLi.length后他移除的是一组(1,2,3,4,5)而不是一个，这是怎么回事,变量和读出来的长度有什么区别
alert(i);
i在增大，aLi.length在不断的减小
收获园豆：20
我onclick他就会先新增4个li就等于有9个li了 结果【1，2，3，4，5，1，2，3，4】 现在我用for(var i=0;i<ali.length;i++){ removeChild(ali[0]); } 按道理他会找到第一个ali的值吧 我想的结果【2，3，4，5，1，2，3，4】 但结果是【1.2.3.4】 上面这就是我的想法 你说的用ali.length这个值会动态变化，你说的这个值是不是还是那一组呢？ 怎么看到细节的变化
其他回答(1)
0
楼上正解,
你同时试试alert(i);alert(aLi.length);alert(iNum);这几个,然后把循环条件i<aLi.length与i<iNum,慢慢试就会发现问题了.
