重点: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. ANT-build.xml编译文件详解

    Ant 开发Ant的构建文件当开始一个新的项目时,首先应该编写Ant构建文件.构建文件定义了构建过程,并被团队开发中每个人使用.Ant构建文件默认命名为build.xml,也可以取其他的名字.只不过在 ...

  2. MySql 性能优化杂记

    前一段时间接触MySql 服务器,关于查询忧化方面整理,优化主要唯绕几个工具函数 : show profiling  , explain ,  索引 , limit 如果上司抱怨服务器查询太慢,这时候 ...

  3. 介绍几个java把网页报存为图片的框架

    java在图像这一块非常弱.用java实现java截图倒不难,原理吗就是把当前屏幕存成一个图,然后获取鼠标拉去的想去位置然后把截取的图保存到panel里边,再生成图片即可:示例代码就不展示了,网上很多 ...

  4. JAVA之关于This的用法

    JAVA之关于This的用法   业精于勤,荒于嬉:行成于思,毁于随.——韩愈 用类名定义一个变量的时候,定义的应该只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法,那们类里面是够也应该 ...

  5. Oracle GoldenGate Veridata 12.1.3已经发布

    通过GoldenGate Veridata 12.1.3,现在只需要一键点击即可修复数据复制后不一致的数据. veridata 架构

  6. C#判断IP地址是否合法函数-使用正则表达式-2个 (转)

    public bool IsCorrenctIP(string ip){ string pattrn=@"(/d{1,2}|1/d/d|2[0-4]/d|25[0-5])/.(/d{1,2} ...

  7. php无缝连接滚动

    最近用到了,仿照别人的写了一个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. mongo db 分享 ppt

    在公司内部的mongo db的ppt.初步进阶 http://files.cnblogs.com/files/yuhan-TB/mongoDB.pptx

  9. hadoop 中对Vlong 和 Vint的压缩方法

    hadoop 中对java的基本类型进行了writeable的封装,并且所有这些writeable都是继承自WritableComparable的,都是可比较的:并且,它们都有对应的get() 和 s ...

  10. python随笔

    1. 使用iter实现接收用户多行输入 stopword = '' str = '' print('请将要添加的内容输入下方,输入空白行按回车退出程序:') for line in iter(inpu ...