JS基础——自定义属性2
2014-10-31 17:59
225 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS基础——自定义属性2</title> <script> window.onload = function(){ var aBtn = document.getElementsByTagName('input'); var arr = ['孙悟空','琪 琪','孙悟饭','孙悟天']; for(var i=0; i<aBtn.length; i++){ aBtn[i].index =0; aBtn[i].onclick = function(){ //alert(this.index); this.value = arr[this.index]; this.index ++; if(this.index == arr.length){ this.index = 0; } }; } }; </script> </head> <body> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> </body> </html>
思路:
先获取元素,然后通过for循环出所有的按钮,再给每个按钮添加一个自定义的索引值(aBtn[i].index = 0;)
当点击按钮时,先alert测试一下当前的索引值(this.index),然后把数组对应的索引值赋给当前点击的按钮,
同时让当前索引值自增,当索引值增加到数组的长度时,就让索引值回到0,即可,这样点击任意按钮都能各自循环
数组中的元素而不会产生冲突。
相关文章推荐
- JS基础——自定义属性的应用1
- js基础自定义属性索引值之图片切换实例
- [妙味JS基础]第三课:自定义属性、索引值
- js基础之自定义属性索引的应用
- js取值 html标签自定义属性(图)
- js取值 html标签自定义属性(图)
- js RuntimeObject() 获取ie里面自定义函数或者属性的集合
- js中如果无法获取某个html属性,例如自定义了一个dir属性,但获取总是为空,尝试换个词,因为可能什么关键词冲突了。
- Js脚本:动态添加HTML自定义属性以及处理html元素的自定义属性(兼容Firefox和IE)
- JS基础之object所具有的属性和方法
- 【JS--基础--对象】--基础用法(通用的Object属性和方法)
- JS动态行列 、获取select自定义属性
- 客户端数据校验的通用解决之道----妙用自定义属性 (JS)
- 【JS基础回顾】String对象及其常用属性以及方法
- 【JS基础回顾】Array对象及其常用属性以及方法
- js取值 html标签自定义属性(图)
- JavaScript/Js脚本处理html元素的自定义属性(兼容Firefox和IE)
- JavaScript/Js脚本处理html元素的自定义属性(兼容Firefox和IE)
- JS动态添加HTML自定义属性以及处理HTML元素的自定义属性(兼容FIREFOX和IE)
- 【javascript基础】JS正则表达式的实例属性