js基础之自定义属性索引的应用
2017-02-17 21:02
155 查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
//这样我们就完成了点击3个按钮,分别弹出对应数组中的值,且他们之间互补干扰,这就告诉我们他们可以分别控制三个功能的切换
window.onload = function (){
var aBtn=document.getElementsByTagName('input');
var aP=document.getElementsByTagName('p');
var arr=['A','B','C'];
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给每一个按钮添加之定义属性索引,并且这样他能找到对应的i,
aBtn[i].onclick=function(){
//alert(i);如果我们想要弹出 1 2 3的话,这样是行不通的,我们都知道这是闭包产生的影响
alert(this.index);//这样就能找到一组对应关系,可以对应数组中的数据
this.value=arr[this.index];//
//比如我们想用这中匹配关系去匹配相应的P元素,去改变P元素中的值
aP[this.index].innerHTML=arr[this.index];
}
}
}
</script>
</head>
<body>
<input type="button" value="0"/>
<input type="button" value="0"/>
<input type="button" value="0"/>
<p>a</p>
<p>b</p>
<p>c</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
</style>
<script>
//这样我们就完成了点击3个按钮,分别弹出对应数组中的值,且他们之间互补干扰,这就告诉我们他们可以分别控制三个功能的切换
window.onload = function (){
var aBtn=document.getElementsByTagName('input');
var aP=document.getElementsByTagName('p');
var arr=['A','B','C'];
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给每一个按钮添加之定义属性索引,并且这样他能找到对应的i,
aBtn[i].onclick=function(){
//alert(i);如果我们想要弹出 1 2 3的话,这样是行不通的,我们都知道这是闭包产生的影响
alert(this.index);//这样就能找到一组对应关系,可以对应数组中的数据
this.value=arr[this.index];//
//比如我们想用这中匹配关系去匹配相应的P元素,去改变P元素中的值
aP[this.index].innerHTML=arr[this.index];
}
}
}
</script>
</head>
<body>
<input type="button" value="0"/>
<input type="button" value="0"/>
<input type="button" value="0"/>
<p>a</p>
<p>b</p>
<p>c</p>
</body>
</html>
相关文章推荐
- JS基础——自定义属性的应用1
- js基础自定义属性索引值之图片切换实例
- JS初级_自定义属性的应用:点击一次换图片2,再点击恢复为图片1
- [妙味JS基础]第三课:自定义属性、索引值
- JS基础——自定义属性2
- C#----属性应用之自定义组件和用户组件的属性设置
- Android基础教程(九)之自定义下拉菜单模式----Spinner与setDropDownViewResource的应用
- Visual Studio 2005中web.sitmap 中扩展自定义属性的一些应用范例
- javascript中的自定义属性的应用--避免频繁访问数据库
- JS应用DOM入门:DOM的对象属性
- WPF 基础到企业应用系列索引 推荐
- JS动态行列 、获取select自定义属性
- 使用QuickPart时应用自定义属性和Web Part Connection功能的演示视频
- WPF基础到企业应用系列7——深入剖析依赖属性(一) 推荐
- JavaScript/Js脚本处理html元素的自定义属性(兼容Firefox和IE)
- js自定义对象.属性
- Android基础教程(九)之自定义下拉菜单模式----Spinner与setDropDownViewResource的应用
- 一些JS基础应用
- 使用QuickPart时应用自定义属性和Web Part Connection功能的演示视频
- js,关于为DOM对象添加自定义属性