JS利用塊級作用域解決循環綁定

一 概念```html
.html文件
<ul>
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

.js文件
var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        // 打印列表項的索引
        console.log(i);
    }
}
// 變量污染
// 獲取局部作用域解決
// 閉包解決
// 對象屬性解決
```二 代碼示范

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>塊級作用域解決循環綁定</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 80px;
height: 35px;
background-color: pink;
border-radius: 5px;
float: left;
margin-left: 3px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
// ES6語法中支持塊級作用域

let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(i)
}
}
</script>
</html>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 千萬不要發朋友圈，要發您也不能宵夜還配兩根凹凸有致的大鎖骨，你好毒啊! 愛吃還不胖的人會傷了多少人的玻璃心啊! 你...
    李妙齡閱讀 1,989評論 0贊 0
  • 找一個逃避的理由， 不要讓眼淚埋沒了自己！ 找一個呼吸的空間， 何必一定要悲哀？ 朋友，來吧，跟我一起快樂吧， 自...
    roufeng閱讀 193評論 0贊 0
  • 第一百零六章 十年后的重逢 “秦志戩，他已經完全不把研究所放在眼里了，這是他第一次違抗命令嗎？”老人搖了搖頭，擺...
    腐掉的魚閱讀 159評論 0贊 0