js关于简单选项表的一些疑问？
学了10天样子的JS找了些题来练习，很多不明白。希望大家帮帮忙，先上代码。
.active
{
background:#9CC;
}
.div2
{
width:300px;
height:200px;
border:1px #666666 solid;
display:none;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById('div1');
var btn=odiv.getElementsByTagName('input');
var div2=odiv.getElementsByTagName('div') ;
for(i=0;i<btn.length;i++)
{
btn[i].index=i;
btn[i].onclick=function()
{
for(i=0;i<btn.length;i++)
{
btn[i].className='';
div2[i].style.display='none';
}
this.className='active';
div2[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<input type="button" value="4"/>
<div class="div2" style="display:block;">11</div>
<div class="div2">22</div>
<div class="div2">33</div>
<div class="div2">44</div>
</div>
</body>代码是抄袭网上的，运行过能行。但是不能理解加粗，下划线的两行代码。1‘ btn[i].index=i;这一句的index是索引位置，但是感觉遍历btn就知道了位置。改为自定义的属性a,b测试过都行，这个理解不知到对不对。2’div2[this.index].style.display='block';这个this.index应该大致等于 btn[i].index，但是为什么不能写成div2[btn[1].index]和div2[i]。3‘div2没有遍历过为什么和input是对应的，点input2就是div2
qq_药药_01回答
-
qq_茬芐迷茫_03118827
1.btn[i].index=i 是生成了（btn[0].index=0; btn[1].index=1; btn[2].index=2;btn[3].index=3;） index的英文是指数的意思 这就是自定义用index而不用a b的原因，（单纯的为了方便使用）这里是为了给每一个btn按照0-3顺序添加一个指数。2.this.index是只当前点击的那个btn的指数；btn[1].index 根据1中赋值他的指数就是1，是个定值；div2[i]表达的是for循环内最后一个值，（因为js的一块一块执行的 执行到for时它在接到.onclick的指量时会循环完毕然后输出）div2[i]就只能表示为div2[3]，也是一个定值。3.点input就是相应的div2是因为 div2[this.index] 因为他是在btn[i].onclick=function(){}的函数内，所以此处的this代表的是点击的那个btn，而在最初的for循环里所有的btn已经被遍历并赋上的相应的i值，所有自处的this.index=btn[i].index此处的i是你点击的那个btn的指数。（去百度下js的this解释，能帮你更好的理解）
随时随地看视频慕课网APP
相关分类
JavaScript