javascript - 【求救】子开关全部开启或者关闭，总开关联动起来
本文介绍了javascript - 【求救】子开关全部开启或者关闭，总开关联动起来的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
子开关全部开启或者关闭，总开关联动开或者关，最后一个为总开关,图片在底部。谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.switch{
float: left;
}
.swich{
width:41px;
height:47px;
margin:20px;
cursor: pointer;
}
.on,.off{
width:41px;
height:23px;
background: url(icon.png) no-repeat;
}
.on{
background-position: 0 0;
}
.off{
background-position: 0 -24px;
}
</style>
</head>
<body>
<div class="switch">
<div class="all">
<div class="swich off"></div>
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich on"></div>
<div class="swich on"></div>
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich on"></div>
</div>
<div class="swich off swichAll"></div>
</div>
<div class="switch">
<div class="all">
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich off"></div>
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich off"></div>
<div class="swich off"></div>
<div class="swich on"></div>
</div>
<div class="swich off swichAll"></div>
</div>
<div class="switch">
<div class="all">
<div class="swich on"></div>
<div class="swich on"></div>
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich on"></div>
<div class="swich off"></div>
<div class="swich on"></div>
<div class="swich off"></div>
</div>
<div class="swich off swichAll"></div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 开关控制
$(".swich").click(function(){
if($(this).hasClass("off")){
$(this).attr("class","swich on");
}else{
$(this).attr("class","swich off");
}
});
// 开关全选/反选
$(".swichAll").click(function(){
if($(this).hasClass("off")){
$(this).prev().children("div").attr("class","swich off");
}else{
$(this).prev().children("div").attr("class","swich on");
}
});
});
</script>
</body>
</html>
解决方案
很久没写这种强耦合的面条代码了
// 开关控制
$(".swich").click(function() {
var ele = $(this);
var hassOff = ele.hasClass("off");
ele.attr("class", "swich " + (hassOff ? "on" : "off"));
ele.parent().siblings('.swichAll').attr("class", "swichAll swich " + (hassOff && ele.siblings('.swich.off').length === 0 ? "on" : "off"))
});这篇关于javascript - 【求救】子开关全部开启或者关闭，总开关联动起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
