原 each()、map()

348

作者：汪娇娇

日期：2016.9.1

如果说到某个元素的开关事件，第一反应那就是用一个变量做标记，比如flag，为1时开，为0时关，这是很简单的。下面我将以li的opacity为例，没点之前opacity为1，点击后变成0.5，然后就是1和0.5之间的循环：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
		}
		li{
			border: 1px solid #ccc;
			text-align: center;
			height: 50px;
			line-height: 50px;
			background:#4eaa4c;
			opacity: 1;
			color: #ccc;
		}
		.active{
			opacity: 0.5;
		}
	</style>
	<body>
		<ul>
			<li>1</li>
		</ul>
	</body>
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script>	
		var flag=1;
		$("ul>li").click(function(event) {
			if(flag){
				$(this).addClass('active');
				flag=0;
			}else{
				$(this).removeClass('active');
				flag=1;
			}
		});
	</script>
</html>

效果图如下：

（1）这是没点击之前的：

（2）这是点击之后的：

但是现在如果出现了多了li，总不能每个li都用不同的变量去标记，那如果有100个li，岂不是写累死，所以这时候就想到了jq的第一个方法：each()：

    <body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script>	
		$("ul li").each(function() {	
			var flag=1;
			$(this).click(function(event) {
				if(flag){
					$("ul li").eq($(this).index()).addClass('active');
					flag=0;
				}else{
					$("ul li").eq($(this).index()).removeClass('active');
					flag=1;
				}
			});
		});
	</script>

其实就相当于给每个li加了一个flag变量标记。

效果图如下所示：

第二个方法就是map()，和each()同理。

第三个方法是朋友提供的，没用jQuery：

    <script>	
		var lis=document.getElementsByTagName("li");
		for(var i=0;i<lis.length;i++){
			lis[i].index=true;
			lis[i].addEventListener("click",function(){
				if(this.index){
					this.style.opacity=0.5;
				}else{
					this.style.opacity=1;
				}
				this.index=!this.index;
			})
		}
	</script>

他也是忽然忘了onclick怎么写，然后用了addEventListener方法，够我笑一阵了，哈哈哈。

目前就这3个办法了，希望大家多多来补充哈~

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。