zoukankan      html  css  js  c++  java
  • 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";
        }
    };
  • 相关阅读:
    Format用法总汇
    packed record与record区别
    将实数取整函数
    取鼠标所在位置对应的窗口句柄
    Delphi中优秀的字符串分割函数
    Jscript中的FSO对象模式
    关于.NET开发中遇到的一个验证视图状态Mac失败的解决方法随笔
    如何延长电脑硬盘的使用寿命
    如何避免U盘中毒
    如何优化Windows XP系统来加快网速
  • 原文地址:https://www.cnblogs.com/wuyufei/p/10454743.html
Copyright © 2011-2022 走看看