<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 造三個按鈕
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<script type="text/javascript">
// 獲取被製造出來的三個按鈕
let allButton = document.getElementsByTagName('button');
for(var i = 0 ;i <allButton.length;i++){
allButton[i].onclick = function(){
console.log(i);
}
}
// 匿名函數
for(var index = 0 ;index <allButton.length;index++){
(function(i){
console.log(i);
})(index)
}
// 快級別函數
for(let i = 0 ;i <allButton.length;i++){
allButton[i].onclick = function(){
console.log(i);
}
}
</script>
</body>
</html>
昨晚太困，寫的不好。
看下面。。。。。。。。。。。鏘鏘！！！！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>CASE1: for 循環的計數器是var的場合，先循環完了，纔去綁定的事件，所以輸出不正。全部是是3.</h1>
<div id="case1">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 獲取被製造出來的三個按鈕
let allButton1 = document.querySelectorAll('#case1>button');
//
for(var i = 0 ;i <allButton1.length;i++){
allButton1[i].onclick = function(){
console.log(i);
}
}
</script>
<h1>CASE2: 使用了匿名函數，關於匿名函數的概念，我還得研究研究，反正匿名函數是可以解決上面case1的尷尬問題，實現了一邊綁定，一邊傳值的效果。所以就是綁定的當時的，計數時候的那個時間點的循環變量。據說是通過index這個形參給傳進去的</h1>
<div id="case2">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 獲取被製造出來的三個按鈕
let allButton2 = document.querySelectorAll('#case2>button');
// 匿名函數
for(var index = 0 ;index <allButton2.length;index++){
(function(i){
console.log(i);
})(index)
}
</script>
<h1>CASE3: 與case1相比，只是var i 變成了 let j ，神奇不神奇，厲害不厲害，據說這種就是所謂的塊級作用域的使用，相當於case2中那樣使用了匿名函數。</h1>
<div id="case3">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 獲取被製造出來的三個按鈕
let allButton3 = document.querySelectorAll('#case3>button');
// 塊級別函數
for(let j = 0 ;j <allButton3.length;j++){
allButton3[j].onclick = function(){
console.log(j);
}
}
</script>
</body>
</html>