使用自定义属性思想，解决参数不正确问题

使用自定义属性思想，解决参数不正确问题

需求：点击哪个LI，就让其有SELECT样式类(对应的DIV也有这个样式类)，其余的LI(DIV)都把SELECT样式类移除即可
根据上面，可以修改需求为，不管点击哪个LI，我们先让其所有的LI(DIV)都移除SELECT，再让当前点击的有SELECT样式

<div>
    <ul>
        <li class="select">新闻</li>
        <li>电影</li>
        <li>音乐</li>
    </ul>
    <div class="select">热烈庆祝中国召开十九大</div>
    <div>羞羞的铁拳</div>
    <div>不是诗</div>
</div>

//首先取到取到DOM对象
var tabBox=document.getElementById('tabBox');
var oList=tabBox.getElementsByTagName('li');
var oDivList=tabBox.getElementsByTagName('div');
//创建一个函数实现页卡切换功能
funciton change(index) {
    //设置形参，因为实现方法的时候，我们不清楚用户点击的是哪一个LI，当用户点击的时候，执行这个change方法，并且把这个LI的索引传递给我们，我们就可以在oList集合中通过索引获取到当前点击的这个LI对象
    //利用循环，先移除所有的LI(DIV)移除SELECT
    for(var i=0;i<oList.length;i++){
        oList[i].className='';
        oDivList[i].className='';
    }
    //让当前点击的这个LI有选中样式
    oList[index].className='select';
    oDivList[index].className='select';
}

//给每个LI绑定点击事件，点击的时候执行change方法，把当前点击的索引传递进来，实现页卡的切换
for(var i=0;i<oList.length;i++){
    oList[i].onclick=function(){
        change(i);//把参数传进去，执行方法
    }
}
//但是！浏览器报错！
//我们把change(i);改为console.log(i);看看，发现无论点击哪个，都只会打印3，说明i一直都为3，所以我们点击哪个都没用，因为传递的参数就存在问题

理性分析一下:
第一轮：
oList[0].onclick=function(){
console.log(i);
}
//给元素点击事件绑定方法，点击才会执行，此处绑定属于创建函数，空间中存储的都是字符串，i不是变量是字符
第二轮：
oList[1].onclick=function(){
console.log(i);
}
第三轮：
oList[2].onclick=function(){
console.log(i);
}
三次循环结束，因为进行了步长累加所以i=3;可是通过循环，我们只是给点击事件绑定了一个方法(存在内存中的字符串)，并没有执行。

假设用户点击第二个LI：开始执行第二个绑定的方法(方法执行：形成一个新的作用域，把之前存储的字符串变为代码执行console.log(i);但是此时i已经变为3了，所以无论点击哪一个都为3的原因就在于此，从函数原理核心来看，就说得通了)

for(var i=0;i<oList.length;i++){
    oList[i].onclick=function(){
        /*change(?);(此处需要传递的参数是当前LI的索引，用i不行，用什么?)*/
        oList[i].myIndex = i;//使用自定义属性，给每个元素对象增加一个自定义属性用来存i
        onList[i].onclick = funciton(){
            //this指的是当前发生事情的对象,this.myIndex指点击这个LI的myIndex这个自定义属性的值
        change(this.myIndex);//传递进去的参数，i是正确的索引
        }
    }
}

再来分析一下:
i=0：oList[0].myIndex=0;
i=1：oList[1].myIndex=1;
i=2：oList[2].myIndex=2;
总结：
在使用参数的时候需要考虑参数的的正确存在方式。