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个办法了，希望大家多多来补充哈~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/10/09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读