JavaScript的自定义属性(事件内获得事件外的变量值)

写轮播图点击下方圆点banBtnLi[i],切换到第i个图片
banBtnLi是按钮集合,假设banBtnLi.length是4
banImhLi是装图片的li,自然banImgLi.length也是4
点击banBtnLi[i]先清空所有banBtnLi和banImgLi 的class,再给相应的banBtnLi和banImgLi加上class
因为在function中获取不到外层for中的i值,所以要定义一个banBtnLi的属性banBtnLi.index,把i的值赋给它,
在onmouseover方法中this就是指banBtnLi[i],用this.index就可以获取到外层i的值
方法如下
for(var i=0;i<banBtnLi.length;i++){
  banBtnLi[i].index = i;
  banBtnLi[i].onmouseover = function () {
    for (var j=0;j<banImgLi.length;j++) {
      banImgLi[j].className = "";
      banBtnLi[j].className = "";
    }
    banImgLi[this.index].className = "banner-present";
    banBtnLi[this.index].className = "banner-btn-present";
  }
};

这里给出各个变量的输出值,更容易理解每个变量应该等以几

for(var i=0;i<banBtnLi.length;i++){
    banBtnLi[i].index = i;
    banBtnLi[i].onmouseover = function () {
        for (var j=0;j<banImgLi.length;j++) {
            banImgLi[j].className = "";
            banBtnLi[j].className = "";
        }

        console.log(banBtnLi[i]);//undefined
        // console.log(banBtnLi[i].index);//报错
        console.log(i);//3
        console.log(j);//3
        console.log(this.index);//指几是几:0或1或2

        banImgLi[this.index].className = "banner-present";
        banBtnLi[this.index].className = "banner-btn-present";
    }
};
原文地址:https://www.cnblogs.com/wuyufei/p/10454743.html