重点: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. USB鼠标按键驱动

    现象:把USB设备接到PC 1. 右下角弹出"发现android phone" 2. 跳出一个对话框,提示你安装驱动程序 问1. 既然还没有"驱动程序",为何能 ...

  2. ssl和https协议详解

    转自:https://cuiyongxiu.com/201102/24157.html ssl协议的起源和历史我就不再多说了,就是那个Netscape 网景公司开发的,它的作用主要是提供了一种安全传输 ...

  3. Spring学习笔记之Constructor-based or setter-based DI?

    如果是强制依赖,那么使用构造器注入,如果是可选依赖,那么使用set方法注入.Spring鼓励构造器注入,可以确保依赖项不为null, Since you can mix constructor-bas ...

  4. android selector详解

    --> 改变字体的颜色<selector xmlns:android="http://schemas.android.com/apk/res/android"> ...

  5. linux安装时出现your cpu does not support long mode的解决方法

    如果你确定你的电脑支持64bit且是64bit的宿主系统,则需要修改BIOS中的Inter Virtualization Technology为enabled.

  6. asp中cookie欺骗/注入原理与防范

     一直以来sql注入被广泛关注,也有专门的防注系统代码.发现,如果代码不严谨也会有cookie欺骗/注入的情况.原来, 防注入系统没有注意到 Cookies 的问题!这里以ASP为例,分析一下cook ...

  7. Ogre1.8地形和天空盒的建立(一块地形)

    转自:http://www.cnblogs.com/WindyMax/ 研究Ogre的程序笔记 编译环境 WIN7 32  VS2008   Ogre的版本 1.8 Ogre的地形算法是采用Geome ...

  8. 重拾java系列一java基础(4)

    本章主要回顾一些类的相关知识: (1)static: static 静态的: 属于类的资源, 使用类名访问.  静态属性: 只有一份的变量  静态方法: 是属于类方法, 可以使用类名直接访问. 静态方 ...

  9. 2016-1-9 Quartz框架的学习,剪裁图片并设置边框

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  10. Virtual Friend Function

    一般而言,友元作为一种紧耦合的设计,被视作类的一部分.一个经典的应用就是关于类的序列化和反序列化. class A { friend ostream& operator<<(ost ...