自定义属性建立匹配、对应关系——JS学习笔记2015-5-27（第40天）

页面中经常需要建立匹配、对应关系来改变页面的显示元素；这个时候可能就需要用到自定义属性来添加索引值

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义属性匹配索引值</title>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<p>a</p>
<p>b</p>
<p>c</p>

<script type="text/javascript">
    var aBtn = document.getElementsByTagName('input');
    var arr = ['美队', '钢铁侠', '绿巨人'];
    var aP = document.getElementsByTagName('p');
     // 要想建立“匹配”、“对应”关系，就用索引值；
    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]; //匹配了相应的P元素
         }
    }

</script>
</body>
</html>

思路：

点击按钮，让下面的对应的P内容改变，

改变为什么呢？改变为对应数组的内容；比如：第一个按钮点击后改变第一p元素的内容，这个内容来自于数组的第一个元素；

这里的自定义值就相当于一个桥梁联系了按钮、数组、p标签