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