前言
如果有同一组元素, 我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法.
一、按钮改变背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 获取元素
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
// 绑定事件
btns[i].onclick = function () {
// 清除所有按钮的背景色
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// 给当前按钮添加背景色
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
案例 : 实现换肤效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 310px;
height: 50px;
margin: 100px auto;
}
.box img {
width: 100px;
height: 50px;
border: 1px solid #fff;
box-sizing: border-box;
}
body {
background: url(./images/1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/0.jpg" alt="">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
</div>
<script>
var imgs = document.getElementsByTagName('img');
var bod = document.body;
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
bod.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
案例 : 全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px 300px;
}
table {
width: 500px;
height: 100px;
}
thead tr {
height: 30px;
background-color: skyblue;
text-align: center;
}
tbody tr {
height: 30px;
background: #ccc;
border: 1px solid rgb(94, 90, 90);
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id='j_tb'>
<tr>
<td><input type="checkbox"></td>
<td>IPhone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>IPad Air</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var thi = document.getElementById('j_cbAll');
var tbis = document.getElementById('j_tb').getElementsByTagName('input');
// 全选
thi.onclick = function () {
for (var i = 0; i < tbis.length; i++) {
// 让下面的复选框和上面的复选框状态一样.
tbis[i].checked = this.checked;
}
}
for (var i = 0; i < tbis.length; i++) {
// 下面的复选框绑定点击事件.每次点击, 都要循环查看下面所有的复选框有没有选择.
tbis[i].onclick = function () {
var flag = true;
// 循环查看所有的复选框有没有选中.
for (var i = 0; i < tbis.length; i++) {
// 如果选中. 让flag+1
if (!tbis[i].checked) {
flag = false;
}
}
thi.checked = flag;
}
}
</script>
</body>
</html>