作者:汪娇娇
日期: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个办法了,希望大家多多来补充哈~
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句