js基礎之自定義屬性索引的應用
阿新 • • 發佈：2019-02-03
<!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>