for迴圈中使用object[i].index=i的作用
阿新 • • 發佈：2021-02-04
技術標籤：javascript
在object[i].index=i中：object為當前的陣列物件；index為給當前陣列物件新增的屬性，可以自定義名稱，用來存放索引值。這樣便可以使事件內部函式的索引位和for迴圈中i的值保持一致。
1.當for迴圈內部不包含事件時，i的值即為陣列的索引值。
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li
{ 結果：
2.當for迴圈內部包含事件時，for迴圈先執行一遍，事件內部i的值就變成了迴圈結束時的i值，此時無論點選哪一個小球，都輸出的是最大索引位7。
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li
{
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
list-style: none;
background-color: #c2ffc5;
text-align: center;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<ul id="list">
<li class="box">0</li>
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
<script>
var arr = document.getElementsByClassName("box");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick=function(){
console.log(i);
};
}
</script>
</body>
</html>
結果：
3.當使用object[i].index=i後，無論點選哪一個小球，都輸出該小球所對應的索引位。
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li
{
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
list-style: none;
background-color: #c2ffc5;
text-align: center;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<ul id="list">
<li class="box">0</li>
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
<script>
var arr = document.getElementsByClassName("box");
for (var i = 0; i < arr.length; i++) {
arr[i].index=i;
arr[i].onclick=function(){
console.log(this.index);
};
}
</script>
</body>
</html>
結果：
