原 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 条评论
登录 后参与评论

相关文章

  • 原 一、JavaScript简介

    作者:汪娇娇 时间:2017年11月4日 一、组成部分 ? JavaScript由三部分内容组成: (1)ECMAScript(核心) (2)DOM(文档对象模...

    jojo
  • 原 荐 自己写JSON编辑器

    作者:汪娇娇 时间:2018年1月15日 下一篇:自己写代码对比工具 时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。...

    jojo
  • 原 模块化编程之require.js

    作者:汪娇娇 日期:2016.5.4 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,...

    jojo
  • 【CSS】828- 纯CSS导航栏下划线跟随效果

    在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

    pingan8787
  • vue 的上拉加载,下拉刷新(基于better-scrol)

    我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的...

    我乃小神神
  • Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

    本文实例讲述了Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:

    砸漏
  • PHP之多条件混合筛选功能的实现方法

    以上这篇PHP之多条件混合筛选功能的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

    砸漏
  • 使用webpack打包js文件(隔行变色案例)

    Dream城堡
  • 第21天:京东页面轮播图

    半指温柔乐
  • html5新特性实现tab选项卡切换

    分析代码可以知道,选项卡的class为active的时候,选项卡就被选中,当内容section的style属性为display:block时,内容就被选中

    一个淡定的打工菜鸟

扫码关注云+社区

领取腾讯云代金券