ES6的let的小demo

最新推荐文章于 2024-05-16 00:00:00 发布

爱泡澡的小萝卜

最新推荐文章于 2024-05-16 00:00:00 发布

阅读量63

点赞数

分类专栏：前端知识 ES6 文章标签： es6

本文链接：https://blog.csdn.net/stphencurry/article/details/115093953

版权

前端知识同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ES6

2 篇文章 0 订阅

订阅专栏

let和var的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.item {
				float: left;
				width: 100px;
				height: 100px;
				margin: 0 10px ;
				border: 1px solid purple;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h2>点击切换颜色</h2>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<script>
			// 获取对象
			let items = document.getElementsByClassName('item');
			
			// 遍历并绑定事件
			// for(var i = 0; i < items.length; i++) {
			// 	items[i].onclick = function() {
					// this.style.background = 'pink';
					//items[i].style.background = 'pink'
			 		// 为什么不好使呢？
			 		// 因为全局变量i出现了问题,i并没有在块级作用域内.此时i=3,函数内部找督导i回到全局作用域找,
					// 全局作用域的i为3,所以点击时效,一共三个元素,下标最大为2,越界
			// 	}
			// }
			
			// 如何修改呢？
			for(let i = 0; i < items.length; i++) {
				items[i].onclick = function() {
					items[i].style.background = 'pink'
				}
			}
				
			
		</script>
	</body>
</html>

爱泡澡的小萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6的let的小demo

let和var的区别<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .item { float: left; width: 100px; height: 100px; margin: 0 10px ; border: 1px solid purple;
复制链接

扫一扫