重点:1、添加索引值的作用:建立匹配、对应的关系。

     比如:使每一个按钮对应数组里的每一张图,arrImg[this.index].

   2、不要在for循环的函数里面使用i.

   3、添加索引值的方法aBtn[i].index=i;//索引值 给每一个li添加了自定义属性index为i,它的作用是一旦和其他数组相匹配,就可以找到相应数组里的东西

代码示例: 

for(var i=0;i<aLi.length;i++){
  aLi[i].index=i; //索引值 给每一个li添加了自定义属性index为i,它的作用是一旦和其他数组相匹配,就可以找到相应数组里的东西
  aLi[i].onclick=function(){
  oImg.src=arrUrl[this.index]; //for里面的函数不可以用i
  oP.innerHTML=arrText[this.index];
  oSpan.innerHTML=1+this.index+'/'+arrText.length;
  for(var i=0;i<aLi.length;i++){
  aLi[i].className='';
  };
 this.className='active';
};

  

JS初学之-自定义属性(索引值)的更多相关文章

  1. 函数语法:原生JS获取数组的索引值index

    var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++) { lis[i].i ...

  2. js获取radio选中索引值

    <form name="form1" onsubmit="return foo()"> <input type="radio&quo ...

  3. [妙味JS基础]第三课:自定义属性、索引值

    知识点总结 自定义属性 元素.自定义属性 = 值: 比如: oDiv.abc = 100; =>abc为自定义属性 索引值 index  =>也是自定义属性 oDiv.index = '' ...

  4. JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值

    一个简单的Tab选项卡点击事件. <style type="text/css"> ul{padding:0;margin:0;} .tab{width:400px;} ...

  5. js实现点击<li>标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

  6. js实现数组去重并且显示重复的元素和索引值

    var arr=["a","b","c","d","c","b","d ...

  7. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  8. JS初学之-选项卡(图片切换类)

    初学选项卡,主要问题卡在了索引值上面,花了较长的时间学习. 索引值其实很好理解,就是为每一个元素用JS的方法添加一个属性,即自定义属性. 在for循环里的函数里用i,会直接弹出这个数组的length, ...

  9. JS获取select选中的值,所有option值

    <select name="myselect" id="myselect"> <option value="2042"&g ...

随机推荐

  1. (BFS)hdoj1242-Rescue

    题目地址 初学BFS,第一次用BFS做题.题目就是一个基本的BFS模型,需要稍加注意的是遇到警卫时间要+1,以及最后比的是最短的时间而不是步数. #include<cstdio> #inc ...

  2. CSS盒子模型和IE浏览器

    CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...

  3. Android ScrollView与ViewPager滑动冲突

    前段时间做项目碰到在ScrollView里添加ViewPager,但是发现ViewPager的左右滑动和ScrollView的滑动冲突了,解决这个问题的方法是重写ScrollView. 代码: pub ...

  4. SQL Server 2005使用作业设置定时任务(转)

    1.开启SQL Server Agent服务 使用作业需要SQL Agent服务的支持,并且需要设置为自动启动,否则你的作业不会被执行. 以下步骤开启服务:开始-->>>运行--&g ...

  5. 《day12---异常》

    //91-面向对象-异常-异常的发生和简单应用. /* 异常: java运行时期发生的问题就是异常. Java中运行时的除了异常Exception含有错误Error. 异常:通常发生后可以有针对性的处 ...

  6. static声明初始化块的一下注意事项

    通过输出结果,我们可以看到,程序运行时静态初始化块最先被执行,然后执行普通初始化块,最后才执行构造方法.由于静态初始化块只在类加载时执行一次,所以当再次创建对象 hello2 时并未执行静态初始化块.

  7. 利用烧鹅制作简单BadUSB,插谁谁怀孕

    所用硬件设备为烧鹅,烧鹅是RadioWar基于Teensy++ 2.0 AT90USB1286芯片设计的USB Rubber Ducky类开发板. 使用veil编码meterpreter生成paylo ...

  8. BZOJ 4131 并行博弈

    发现必胜态只和(1,1)的状态有关. 无法得知必胜的方法,只知道谁会必胜. #include<iostream> #include<cstdio> #include<cs ...

  9. css if hack之兼容ie

    1.Css if hack条件语法< !--[if IE]> Only IE <![endif]-->仅所有的WIN系统自带IE可识别< !--[if IE 5.0]&g ...

  10. 《软件工程》individual project开发小记(一)

    今天周四没有想去上的课,早八点到中午11点半,下午吃完饭后稍微完善了一下,目前代码可以在dev c++和vs2012上正常运行,性能分析我看资料上一大坨,考虑到目前状态不太好,脑袋转不动了,决定先放一 ...