for循环中监听函数中打印变量
<!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 + 0for2: var name = kobe + 1for3: var name = kobe + 2for4: var name = kobe + 3for5: var name = kobe + 4*/for (var i = 0; i < 5; i++) {console.log("---------")var name = "kobe" + ibtnEl.onclick = function() {console.log(i)console.log(message)console.log(name)}}message = "哈哈哈哈哈"console.log(i) // 5console.log(name)</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>
</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 = 0btnItemEl.onclick = function() {}for2: var btnItemEl = btnEls[1]btn2.index = 1for3: var btnItemEl = btnEls[2]btn3.index = 2for4: var btnItemEl = btnEls[3]btn4.index = 3*/// 对每一个按钮的点击进行监听for (var i = 0; i < btnEls.length; i++) {var btnItemEl = btnEls[i]btnItemEl.index = idebuggerbtnItemEl.onclick = function() {debuggerconsole.log(i)console.log(btnItemEl)// 怎么样在这里能拿到对应的btnItemEl// 方案一: 直接获取thisconsole.log(this)// 方案二: 先获取索引console.log(this.index)}}console.log(i) // 4console.log(btnItemEl)</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.crumbs {height: 63px;line-height: 63px;font-size: 12px;}.crumbs .item {cursor: pointer;}.crumbs .item:last-child {color: #000;}.operation {padding: 0 24px;background-color: #fff;}.operation > .row {display: flex;}.operation > .row .item {width: 104px;height: 48px;line-height: 48px;font-size: 12px;color: #000;cursor: pointer;}.operation > .row .item:first-child {color: #666;cursor: auto;}.operation > .row .item.active {color: red;}/* 商品列表 */.products {margin-top: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;}.products > .item {width: 291px;background-color: #fff;margin-bottom: 12px;}.products > .item a {display: flex;flex-direction: column;align-items: center;}.products > .item .album {width: 180px;height: 180px;margin: 30px 0;}.products > .item .name {font-weight: 700;color: #000;}.products > .item .discount {margin: 10px 0 16px;color: #666;}.products > .item .price {font-size: 16px;font-weight: 700;color: red;}.products > .item .service {display: flex;justify-content: center;margin: 10px 0;}.products > .item .service .tip {margin: 0 3px;padding: 0 3px;border: 1px solid red;border-radius: 3px;font-size: 12px;color: red;}.products > .item .comment {display: flex;justify-content: center;margin-bottom: 12px;}.products > .item .comment span {margin: 0 5px;font-size: 12px;color: #666;}</style>
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li><li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li></ul></div></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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"><!-- <li class="item"><a href="#"><img class="album" src="./img/product_01.webp" alt=""><div class="name">HUAWEI MateBook E 12.6英寸</div><div class="discount">预订立省300元|12期免息</div><div class="price">¥6499</div><div class="service"><span class="tip">分期免息</span><span class="tip">赠送积分</span></div><div class="comment"><span>3190人评论</span><span>96% 好评</span></div></a></li> --></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")for (var i = 0; i < resultList.length; i++) {// console.log(resultList[i]) // -> item// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个item// 1.1. 最外层的itemvar itemEl = document.createElement("li")itemEl.classList.add("item")productsEl.append(itemEl)// 1.2. 创建a元素var aEl = document.createElement("a")aEl.href = "#"itemEl.append(aEl)// 1.3. 添加imgvar albumEl = document.createElement("img")albumEl.classList.add("album")albumEl.src = `${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}`aEl.append(albumEl)// 1.4. 创建namevar nameEl = document.createElement("div")nameEl.classList.add("name")nameEl.textContent = resultItem.nameaEl.append(nameEl)// 1.5. 创建discountvar discountEl = document.createElement("div")discountEl.classList.add("discount")discountEl.textContent = resultItem.promotionInfoaEl.append(discountEl)// 1.6. 创建pricevar priceEl = document.createElement("div")priceEl.classList.add("price")priceEl.textContent = "¥" + resultItem.priceaEl.append(priceEl)// 1.7. 创建servicevar serviceEl = document.createElement("div")serviceEl.classList.add("service")for (var label of resultItem.promoLabels) {var tipEl = document.createElement("span")tipEl.classList.add("tip")tipEl.textContent = labelserviceEl.append(tipEl)}aEl.append(serviceEl)// 1.8 创建commentvar commentEl = document.createElement("div")commentEl.classList.add("comment")var countEl = document.createElement("span")countEl.textContent = `${resultItem.rateCount}人评论`commentEl.append(countEl)var goodEl = document.createElement("span")goodEl.textContent = `${resultItem.goodRate}% 好评`commentEl.append(goodEl)aEl.append(commentEl)}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")showResultListAction()function showResultListAction() {for (var i = 0; i < resultList.length; i++) {// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script>// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")for (var i = 0; i < resultList.length; i++) {// 获取一条数据var resultItem = resultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}console.log(discountFilters)}}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active">综合</li><li class="item">最新</li><li class="item">评论数</li><li class="item">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script src="./js/utils.js"></script><script>/*1.获取服务优惠中的item2.监听item的点击* 切换active3.根据item的点击获取filterItem* 将其放在一个数组中4.根据最新的filter, 过滤数据* filterResultListAction5.根据过滤的最新数据进行展示* showResultListAction*/// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}// 过滤resultListfilterResultListAction()}}// 封装函数: 过滤resultList数据var showResultList = resultListfunction filterResultListAction() {// 1.过滤数据showResultList = resultList.filter(function(item) {var isFlag = truefor (var filterItem of discountFilters) {if (!item.services.includes(filterItem)) {isFlag = falsebreak}}return isFlag})// 2.重新展示数据showResultListAction()}// 封装函数: 通过for循环, 展示数据showResultListAction()function showResultListAction() {productsEl.innerHTML = ""for (var i = 0; i < showResultList.length; i++) {// 获取一条数据var resultItem = showResultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 添加空的itemaddProductsEmptyItem()}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.banner .images {position: relative;}.banner .images .item {position: absolute;left: 0;top: 0;width: 100%;overflow: hidden;opacity: 0;}.banner .images .item.active {opacity: 1;}.banner .images .item img {position: relative;transform: translate(-50%);left: 50%;width: 1920px;height: 550px;}</style>
</head>
<body><div class="banner"><ul class="images"></ul><div class="control"><button>上一个</button><button>下一个</button></div><div class="indicator"></div></div><script src="./json/banner_data.js"></script><script>// 0.banner的serverURLvar bannerServerURL = "https://res.vmallres.com/"// 1.动态添加轮播图图片数据var imagesEl = document.querySelector(".images")var activeItemEl = nullfor (var i = 0; i < banners.length; i++) {// 获取数据var banner = banners[i]// 创建li元素var itemEl = document.createElement("li")itemEl.classList.add("item")if (i === 0) {itemEl.classList.add("active")activeItemEl = itemEl}imagesEl.append(itemEl)// 创建img元素var imgEl = document.createElement("img")imgEl.src = `${bannerServerURL}${banner.imgUrl}`itemEl.append(imgEl)}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.banner .images {position: relative;height: 550px;}.banner .images .item {position: absolute;left: 0;top: 0;width: 100%;overflow: hidden;opacity: 0;transition: opacity 1000ms ease;}.banner .images .item.active {opacity: 1;}.banner .images .item img {position: relative;transform: translate(-50%);left: 50%;width: 1920px;height: 550px;}</style>
</head>
<body><div class="banner"><ul class="images"></ul><div class="control"><button class="prev">上一个</button><button class="next">下一个</button></div><div class="indicator"></div></div><script src="./json/banner_data.js"></script><script>var bannersCount = banners.length// 0.banner的serverURLvar bannerServerURL = "https://res.vmallres.com/"// 1.动态添加轮播图图片数据var imagesEl = document.querySelector(".images")var activeItemEl = nullfor (var i = 0; i < banners.length; i++) {// 获取数据var banner = banners[i]// 创建li元素var itemEl = document.createElement("li")itemEl.classList.add("item")if (i === 0) {itemEl.classList.add("active")activeItemEl = itemEl}imagesEl.append(itemEl)// 创建img元素var imgEl = document.createElement("img")imgEl.src = `${bannerServerURL}${banner.imgUrl}`itemEl.append(imgEl)}// 2.监听按钮的点击var previousIndex = 0var currentIndex = 0var controlEl = document.querySelector(".control")var prevBtnEl = controlEl.querySelector(".prev")var nextBtnEl = controlEl.querySelector(".next")prevBtnEl.onclick = function() {// 找到上一个previousIndex = currentIndexcurrentIndex--if (currentIndex === -1) {currentIndex = bannersCount - 1}// 让currentIndex变成active状态, 让previous变成普通的状态switchBannerItem()}nextBtnEl.onclick = function() {nextSwitch()}// 3.自动轮播效果var timer = nullstartTimer()// 4.暂停自动轮播imagesEl.onmouseenter = function() {console.log("------onmouseenter")stopTimer()}imagesEl.onmouseleave = function() {startTimer()}// 对功能封装的函数// 封装到函数: switchBannerItemfunction switchBannerItem() {var currentItemEl = imagesEl.children[currentIndex]var previousItemEl = imagesEl.children[previousIndex]previousItemEl.classList.remove("active")currentItemEl.classList.add("active")}// 封装到函数: 播放下一个function nextSwitch() {// 找到下一个previousIndex = currentIndexcurrentIndex++if (currentIndex === bannersCount) {currentIndex = 0}// 让currentIndex变成active状态, 让previous变成普通的状态switchBannerItem()}// 封装到函数: 开启定时器function startTimer() {timer = setInterval(function() {nextSwitch()}, 3000);}function stopTimer() {console.log("timer:", timer)clearInterval(timer)}</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><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/product.css">
</head>
<body><!-- 商品展示的部分 --><div class="wrapper"><!-- 面包屑的导航 --><div class="crumbs"><span class="item">首页</span><span>></span><span class="item">笔记本</span></div><!-- 对内容进行操作 --><div class="operation"><ul class="row category"><li class="item">分类：</li><li class="item">笔记本</li><li class="item">台式机</li><li class="item">智慧屏</li></ul><ul class="row discount"><li class="item">服务优惠：</li><li class="item">仅看有货</li><li class="item">分期免息</li><li class="item">优惠商品</li></ul><ul class="row sort"><li class="item">排序：</li><li class="item active" data-key="default">综合</li><li class="item" data-key="goodRate">好评</li><li class="item" data-key="rateCount">评论数</li><li class="item" data-key="price">价格</li></ul></div><!-- 商品列表部分 --><ul class="products"></ul></div><script src="./json/product_data.js"></script><script src="./js/utils.js"></script><script>/*1.监听排序item的点击2.排他效果* 点击item的active* 之前的item取消active3.获取点击的信息(比如评论数/好评/价格)4.根据点击信息, 对数据进行排序* default情况* 有key的情况* 特别注意: 不能修改源数组5.根据排序之后的数据, 重新展示页面*/// 0.资源服务器的地址var serverURL = "https://res.vmallres.com/pimages"// 1.动态的展示商品列表var productsEl = document.querySelector(".products")// 2.服务优惠的赛选var operationEl = document.querySelector(".operation")var discountEl = operationEl.querySelector(".discount")// 定义变量, 用户记录选中的服务var discountFilters = []for (var i = 1; i < discountEl.children.length; i++) {// 获取对应的discountItemElvar discountItemEl = discountEl.children[i]// 监听discountItemEldiscountItemEl.onclick = function() {// 在active和非active切换this.classList.toggle("active")// 判断是否将关键字添加或者从discountFilters移除掉if (this.classList.contains("active")) {discountFilters.push(this.textContent.trim())} else {var filterItem = this.textContent.trim()var filterIndex = discountFilters.findIndex(function(item) {return item === filterItem})discountFilters.splice(filterIndex, 1)}// 过滤resultListfilterResultListAction()}}// 3.监听排序功能var sortEl = document.querySelector(".sort")var activeItemEl = sortEl.querySelector(".active")// var sortKeys = ["default", "goodRate", "rateCount", "price"]for (var i = 1; i < sortEl.children.length; i++) {var sortItemEl = sortEl.children[i]sortItemEl.index = isortItemEl.onclick = function() {// 1.取消之前的, 添加新的activeactiveItemEl.classList.remove("active")this.classList.add("active")activeItemEl = this// 2.获取信息var sortKey = this.dataset.key// 3.根据key, 对数据进行排序sortResultListAction(sortKey)}}// 封装函数: 过滤resultList数据var showResultList = [].concat(resultList)function filterResultListAction() {// 1.过滤数据showResultList = resultList.filter(function(item) {var isFlag = truefor (var filterItem of discountFilters) {if (!item.services.includes(filterItem)) {isFlag = falsebreak}}return isFlag})// 2.重新展示数据showResultListAction()}// 封装函数: 通过for循环, 展示数据showResultListAction()function showResultListAction() {productsEl.innerHTML = ""for (var i = 0; i < showResultList.length; i++) {// 获取一条数据var resultItem = showResultList[i]// 将一条数据转成界面一个itemvar itemEl = document.createElement("li")itemEl.classList.add("item")// item里面的内容var serviceString = ""for (var label of resultItem.promoLabels) {serviceString += `<span class="tip">${label}</span>`}itemEl.innerHTML = `<a href="#"><img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt=""><div class="name">${resultItem.name}</div><div class="discount">${resultItem.promotionInfo}</div><div class="price">¥${resultItem.price}</div><div class="service">${serviceString}</div><div class="comment"><span>${resultItem.rateCount}人评论</span><span>${resultItem.goodRate}% 好评</span></div></a>`productsEl.append(itemEl)}// 添加空的itemaddProductsEmptyItem()}// 封装函数: 通过key进行排序function sortResultListAction(key) {if (key === "default") {filterResultListAction()} else {showResultList.sort(function(item1, item2) {return item2[key] - item1[key]})}showResultListAction()}</script>
</body>
</html>
