重点: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. 三元运算+lambda表达式

    #三元运算,三目运算,if else简写 if 1 == 1: name = "liangml" else: name = "NB" #如果 1==1 成立,n ...

  2. Quartz之主方法运行

    import static org.quartz.JobBuilder.newJob; import static org.quartz.TriggerBuilder.newTrigger; impo ...

  3. 我们都遇到过的 Replace Blank Space

    题目描述: 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 分析: 看到这个题目,我们都会有 ...

  4. HTML--7JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  5. loaderexceptions

    前段时间遇到一个问题 从容器中取数据时老报一个“无法加载一个或多个请求,请检索loaderexceptions” 真心是不晓得什么问题 以前经常这么用没有问题的 这个是在网站下引用了别的已经编译好的别 ...

  6. Ubuntu 14.10 下安装navicat

    1 下载navicat,网址http://www.navicat.com.cn/download,我下载的是navicat111_premium_cs.tar.gz 2 解压到合适的位置 3 进入解压 ...

  7. iOS 获取IP地址

    一.获取本机IP地址 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 #import <ifadd ...

  8. Java异常机制

    Java异常分类 异常表明程序运行发生了意外,导致正常流程发生错误,例如数学上的除0,打开一个文件但此文件实际不存在,用户输入非法的参数等.在C语言中我们处理这类事件一般是将其与代码正常的流程放在一起 ...

  9. 2012开源项目计划-WPF企业级应用整合平台

    2012开源项目计划-WPF企业级应用整合平台 开篇 2012年,提前祝大家新年快乐,为了加快2012年的开发计划,特打算年前和大家分享一下2012年的开发计划和年后具体的实施计划,希望有兴趣或者有志 ...

  10. 在Azure中的Ubuntu中安装Open edX

    最近,由于工作原因,在Azure上的Ubuntu虚拟机中安装了Open edX 实例,安装过程遇到了不少问题, 在从网上找答案的过程中,学习到了不同的知识. 注:若Ubuntu虚拟机Setup在Glo ...