<script type="text/javascript">
varbtn=document.getElementsByTagName_r('button');
varmyA=document.getElementsByTagName_r('a');
varmySpan=document.getElementsByTagName_r('span');
varmyBody=document.getElementsByTagName_r('body');
vara_arr=['red','green','black'];
varbody_arr=['pink','#a3c5a8','gray'];
window.onload=function() {
for(varj=0;j<myA.length;j++) {
myA[j].style.backgroundColor=a_arr[1];
}
myBody[0].style.backgroundColor=body_arr[1];
mySpan[1].style.background='white';
}
for(vari=0; i<a_arr.length;i++) {
console.log(a_arr[i]);
btn[i].index=i;
btn[i].onclick=function() {
console.log(1);
console.log(a_arr[i]);
for(varj=0;j<myA.length;j++) {
myA[j].style.backgroundColor=a_arr[this.index];
}
myBody[0].style.backgroundColor=body_arr[this.index];
mySpan[this.index].style.backgroundColor='white';
if(this.index==0) {
mySpan[this.index+1].style.backgroundColor='transparent';
mySpan[this.index+2].style.backgroundColor='transparent';
}
if(this.index==1){
mySpan[this.index-1].style.backgroundColor='transparent';
mySpan[this.index+1].style.backgroundColor='transparent';
}
if(this.index==2){
mySpan[this.index-1].style.backgroundColor='transparent';
mySpan[this.index-2].style.backgroundColor='transparent';
}
console.log(this.index);
console.log(this.index-1);
console.log(this.index+1);
}
}
script>
如上段代码所示，相信如果看的话都能看懂。所以在此我就简单的说一下，我之前在写这段代码的时候遇到的问题。
1、正如您所看到的第一个加粗变大呈红色的代码：btn[i].index=i;我之前写的时候没有加这句话，而且在a_arr数组里面添加的也不是，而是i，但是造成的结果是出不来我想要的结果，而且如果在控制台把a_arr[i]打印出来的话，结果会显示说a_arr[i]未定义。原因很简单 因为JS是一种解释性的脚本语言，只有当用户需要的时候，才会解释其相对应的代码。而且我之前的那段代码是写在btn的点击事件里面，所以只有当用户点击按钮的时候才会执行里面的代码，而此时页面中的i已经结束的它自身的循环，即i的值为3；当我们点击的时候a_arr[3],很显然在数组a_arr[]里面没有这个值，所以在控制台才会出现undefined。
2、把代码写成上述的好处：在点击之前 利用for循环，将i的值付给每个btn[i]的下标 即btn[i].index。
我们都知道下标都是从0开始，所以btn[i].index也就对应着每一个i的值。当鼠标点击按钮的时候，this.index就相当于btn[i].index的值，（this指代当前对象的所有者），也就是点击按钮的那个下标。然后将这一点的下标值传送到a_arr[]数组里面。即可得到我们想要的结果
