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";
        }
    };
  • 相关阅读:
    远程、标签
    NUnit单元测试资料汇总
    jdk1.6下载页面
    javac: cannot execute binary file
    how to remove MouseListener / ActionListener on a JTextField
    Linux下chkconfig命令详解(转)
    如何让vnc控制由默认的twm界面改为gnome?(转)
    winzip15.0注冊码
    微服务的优缺点
    站点建设10个最好的响应的HTML5滑块插件
  • 原文地址:https://www.cnblogs.com/wuyufei/p/10454743.html
Copyright © 2011-2022 走看看