原 each()、map()

作者:汪娇娇

日期: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个办法了,希望大家多多来补充哈~

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。...

2365
来自专栏进步博客

解决CSV文件中长数字以科学记数格式保存问题

1132
来自专栏finleyMa

补充上一篇 实现基于最新chrome的动态按需加载组件

上面代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别...

1215
来自专栏柠檬先生

sass 基础——回顾

1.webstorm 自动编译SASS   下载安装包 http://rubyinstaller.org/downloads/   然后点击安装,路径为默认路...

2397
来自专栏FreeBuf

XSS编码剖析

作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在f...

3178
来自专栏IMWeb前端团队

移动端minimvvm框架qvm实现

gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考...

22410
来自专栏云瓣

深入Redux架构

关于redux 之前写了一篇通过一个demo了解Redux,但对于redux的核心方法没有进行深入剖析,在此重新总结学习,完整的代码看这里。(参考了React ...

2886
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5607
来自专栏吴伟祥

Velocity语法大全 转

本文转载自:http://www.cnblogs.com/codingsilence/archive/2011/03/29/2146580.html

674
来自专栏web编程技术分享

eclipse常用快捷键

2976

扫码关注云+社区

领取腾讯云代金券