JS基础——索引值应用2
来源:互联网 发布:已备案过期删除域名 编辑:程序博客网 时间:2024/06/16 02:17
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS基础——索引值应用2</title>
- <script>
- window.onload = function(){
- var aBtn = document.getElementsByTagName('input');
- var aP = document.getElementsByTagName('p');
- var arr = ['孙悟空','孙悟饭','孙悟天'];
- for(var i=0; i<aBtn.length; i++){
- // 想建立“匹配”“对应”关系,就用索引值
- aBtn[i].index = i;
- aBtn[i].onclick = function(){
- this.value = arr[this.index];
- aP[this.index].innerHTML = arr[this.index];
- };
- }
- };
- </script>
- </head>
- <body>
- <input type="button" value="按钮">
- <input type="button" value="按钮">
- <input type="button" value="按钮">
- <p>11111</p>
- <p>22222</p>
- <p>33333</p>
- </body>
- </html>
分析:
首先获取相关元素,然后循环遍历所有按钮,给每个按钮添加索引值,建立数组与按钮等元素的匹配对应关系,
接着点击按钮时,把当前索引值所对应的数组赋给当前点击的按钮,同时也赋给与之对应匹配的P。
0 0
- JS基础——索引值应用2
- JS基础——索引值应用2
- JS基础——索引值的应用
- JS基础——索引值的应用
- js基础之自定义属性索引的应用
- js基础2应用案例
- JS基础——自定义属性的应用1
- JS基础——自定义属性的应用1
- Oracle 基础——索引
- Css基础学习—索引
- js基础自定义属性索引值之图片切换实例
- 一些JS基础应用
- jS事件基础应用
- 重回JS—基础2
- mysql 入门基础(2)—外键、主键和索引
- WPF 基础到企业应用系列索引
- ★ 索引应用案例——oracle
- Numpy基础功能索引——续
- JS基础——数据类型
- 10种软件滤波方法
- Ubuntu安装firefox-37.0.2
- js基础——图片切换实例
- linux调度器概观
- JS基础——索引值应用2
- FileStream文件流
- java语言实现创建型设计模式—原型模式(Prototype)
- 在Ubuntu 14.04 64bit上安装Markdown编辑器Remarkble
- java设计模式_动态代理(dynamicProxy)
- JS基础——自定义属性2
- CUDA编程基本概念与矩阵运算
- Shell脚本中执行sql
- JS基础——索引值的应用