1. for循环中监听函数打印变量
1.1 执行顺序
- onclick会在点击的时候执行，而此时，代码中的变量message和i都已修改
<!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>按钮</button>
<script>
var btnEl = document.querySelector("button")
var message = "Hello World"
/*
for1: var name = kobe + 0
for2: var name = kobe + 1
for3: var name = kobe + 2
for4: var name = kobe + 3
for5: var name = kobe + 4
*/
for (var i = 0; i < 5; i++) {
console.log("---------")
var name = "kobe" + i
// 点击按钮的时候才会执行
btnEl.onclick = function() {
console.log(i) // 5
console.log(message) // "哈哈哈哈哈"
console.log(name) // kobe4
}
}
message = "哈哈哈哈哈"
console.log(i) // 5
console.log(name) // kobe4
</script>
</body>
</html>
2. 不同按钮获取索引
- 有3种解决方案
- 将var改为let
- 使用立即执行函数
- 给每一个按钮对象添加一个index属性，值为i
<!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>
<div class="box">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
</div>
<script>
var btnEls = document.querySelectorAll("button")
// [btn1, btn2, btn3, btn4]
/*
for1: var btnItemEl = btnEls[0]
btn1.index = 0
btnItemEl.onclick = function() {}
for2: var btnItemEl = btnEls[1]
btn2.index = 1
for3: var btnItemEl = btnEls[2]
btn3.index = 2
for4: var btnItemEl = btnEls[3]
btn4.index = 3
*/
// 对每一个按钮的点击进行监听
for (var i = 0; i < btnEls.length; i++) {
var btnItemEl = btnEls[i]
// 在按钮上绑定一个index属性
btnItemEl.index = i
btnItemEl.onclick = function() {
console.log(i)
console.log(btnItemEl)
// 怎么样在这里能拿到对应的btnItemEl
// 方案一: 直接获取this
console.log(this)
// 方案二: 先获取索引
console.log(this.index)
}
}
console.log(i) // 4
console.log(btnItemEl) // <button>按钮4</button>
</script>
</body>
</html>
2. 列表过滤
2.1 返回数组中有相同朋友的对象
var infos = [
{ name: "curry", friends: ["abc", "cba"] },
{ name: "kobe", friends: ["nba", "cba"] },
{ name: "james", friends: ["nba", "cba", "abc"] },
]
// 需要共有的朋友
var filters = ["nba"]
// 展示的内容
var showInfos = infos.filter(function(item) {
var friends = item.friends
var isFlag = true
for (var filterItem of filters) {
if (!friends.includes(filterItem)) {
isFlag = false
break
}
}
return isFlag
})
console.log(showInfos) // 返回的数组包含 kobe 和 james
2.2 通过点击按钮选择展示的内容
模拟场景：通过选中按钮点击的颜色，返回学生中含有其颜色的学生，按钮支持多个点击
<!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>
.box button {
cursor: pointer;
}
.box button.active {
color: red;
}
</style>
</head>
<body>
<div class="box">
<button>red</button>
<button>yellow</button>
<button>blue</button>
</div>
<div class="list"></div>
<script>
// 1.默认展示的学生
var students = [
{name: "小明", colors: ["red", "blue", "green"]},
{name: "小王", colors: ["orange", "yellow", "red"]},
{name: "小龙", colors: ["purple", "yellow", "black"]},
{name: "小李", colors: ["red", "orange", "blue"]},
]
// 2.点击按钮, 按钮变成选中
var boxEl = document.querySelector(".box")
// 当前已选中的按钮颜色的数组
var filters = []
var newStudents = students
for (var i = 0; i < boxEl.children.length; i++) {
var btnEl = boxEl.children[i]
btnEl.onclick = function() {
// 1.修改active
this.classList.toggle("active")
// 2.修改filters
if (this.classList.contains("active")) {
filters.push(this.textContent.trim())
} else {
var filterItem = this.textContent.trim()
var index = filters.indexOf(filterItem)
// 将取消选中的按钮的颜色移除数组
filters.splice(index, 1)
}
// 3.过滤数据
newStudents = []
for (var stu of students) {
var isFlag = true
for (var filterItem of filters) {
if (!stu.colors.includes(filterItem)) {
isFlag = false
break
}
}
if (isFlag) {
newStudents.push(stu)
}
}
// 4.展示newStudents
showStudentListAction()
}
}
var listEl = document.querySelector(".list")
showStudentListAction()
function showStudentListAction() {
listEl.innerHTML = ""
for (var i = 0; i < newStudents.length; i++) {
var newStu = newStudents[i]
var divEl = document.createElement("div")
divEl.textContent = newStu.name
listEl.append(divEl)
}
}
</script>
</body>
</html>
