选项卡案例中let与var的区别

最新推荐文章于 2022-07-17 23:23:57 发布

蒲公英1001

最新推荐文章于 2022-07-17 23:23:57 发布

阅读量434

点赞数

文章标签： javascript css html css3 jquery

本文链接：https://blog.csdn.net/wangyining070205/article/details/124233884

版权

之前学到let与var的区别是，曾经看过一篇文章，记得有这么几点：
1.let不能被重新定义，但是var是可以的。验证代码如下：

		<script type="text/javascript">
			var num1=5;
			var num1=6;
			document.write(num1); //输出6
		</script>

上面代码中，num1输出值为6。
如果用let定义，num2会报错“ Identifier ‘num2’ has already been declared”,此变量已经存在，验证代码如下。

        <script type="text/javascript">
			let num2=5;
			let num2=6;
			document.write(num2);
		</script>

2.var变量，在for循环以外也可以访问；
let变量，在for循环以外不可被访问。
验证代码如下：

		<script type="text/javascript">
			for (var i = 0; i < 5; i++) {
				document.write(i);
			}
			console.log(i); //输出：5
		</script>
		<script type="text/javascript">
			for (let j = 0; j < 5; j++) {
				document.write(j);
			}
			console.log(j); //Uncaught ReferenceError: j is not defined
		</script>

上面代码中，用var定义的i，可以输出；用let定义的j，控制台提示未定义。
今天在用js写选项卡代码的时候，又发现了for循环中var与let的一个区别。

        <script>
			var tab_list = document.querySelector('.tab_list'); // 获取标签部分的所有元素对象
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item'); // 获取内容部分的所有内容对象
			for (let i = 0; i < lis.length; i++) { // for循环绑定点击事件
				lis[i].onmouseover = function() {
					for (let j = 0; j < lis.length; j++) {
						lis[j].className = '';
					  items[j].style.display = 'none';
					}
				this.className = 'current';
	      items[i].style.display = 'block';	
				};
			}
		</script>

上面代码中外层的for循环中，变量i如果使用var来定义，那么将不能实现选项卡效果，之前是需要设置一个index变量，来获取当前选项卡的索引值。

items[index].style.display = 'block';

而用了let后，每次循环的时候，i的值都能从0开始，所以不必再借助index，直接使用i变量就可以。
下面附上选项卡效果的完整代码，选项卡效果是参照京东网站中的选项卡制作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style-type: none;
			}
			.tab {
				width: 778px;
				margin: 100px auto;
			}
			.tab_list {
				height: 39px;
				border: 1px solid #ccc;
				background-color: #f1f1f1;
				border-bottom: 1px solid #c81623;
			}
			.tab_list li {
				float: left;
				height: 39px;
				line-height: 39px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}
			.tab_list .current {
				background-color: #c81623;
				color: #fff;
			}
			.tab_con {
				border: 1px solid #ccc;
				border-top: none;
				height: 200px;
			}
			.item {
				display: none;
				padding-top: 10px;
			}
			.item li {
				height: 35px;
				line-height: 35px;
				padding-left: 20px;
			}
			.item p {
				padding: 10px 20px;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价（1000+）</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">
					商品名称：华为P50 商品编号：100014453207
				</div>
				<div class="item">
					机身重量：181g 机身长度：156.5mm 机身宽度：73.8mm
				</div>
				<div class="item">
					售后服务电话：950800
				</div>
				<div class="item">
					使用手感舒适，系统操作流畅，选择华为，支持国货。
				</div>
				<div class="item">
					信号很好下载东西20几m一秒很快
				</div>
			</div>
		</div>
		<script>
			var tab_list = document.querySelector('.tab_list'); // 获取标签部分的所有元素对象
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item'); // 获取内容部分的所有内容对象
			for (let i = 0; i < lis.length; i++) { // for循环绑定点击事件
				lis[i].onmouseover = function() {
					for (let j = 0; j < lis.length; j++) {
						lis[j].className = '';
					  items[j].style.display = 'none';
					}
				this.className = 'current';
	            items[i].style.display = 'block';	
				};
			}
		</script>
	</body>
</html>

下面是以前借助索引值实现的代码。

	<script>
			var tab_list = document.querySelector('.tab_list');
			var lis = tab_list.querySelectorAll('li');
			var items = document.querySelectorAll('.item'); 
			for (var i = 0; i < lis.length; i++) { 
				lis[i].setAttribute('index', i); // 开始给5个小li设置索引号
				lis[i].onmouseover = function() {
					for (var j = 0; j < lis.length; j++) {
						lis[j].className = '';
						items[j].style.display = 'none';
					}
					this.className = 'current';
					var index = this.getAttribute('index'); //获取索引值
					items[index].style.display = 'block';
				};
			}
		</script>

蒲公英1001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡案例中let与var的区别

之前学到let与var的区别是，曾经看过一篇文章，记得有这么几点：1.let不能被重新定义，但是var是可以的。验证代码如下： <script type="text/javascript"> var num1=5; var num1=6; document.write(num1); //输出6 </script>上面代码中，num1输出值为6。如果用let定义，num2会报错“ Identifier ‘num2’ has already been
复制链接

扫一扫