上海短期网站建设培训,哈铁工程建设公司网站,wordpress主键外键,无人在线观看高清视频 单曲一、需求
鼠标点击上方菜单栏中不同的价格区间#xff0c;自动筛选出价格符合条件的商品#xff0c;并渲染在页面中 二、代码素材
以下是缺失JS部分的代码#xff0c;感兴趣的小伙伴可以先自己试着写一写
!DOCTYPE html
html langenhead…一、需求
鼠标点击上方菜单栏中不同的价格区间自动筛选出价格符合条件的商品并渲染在页面中 二、代码素材
以下是缺失JS部分的代码感兴趣的小伙伴可以先自己试着写一写
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title商品渲染/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.item:hover {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);transform: translate3d(0, -4px, 0);cursor: pointer;}.item img {width: 100%;}.item .name {font-size: 18px;margin-bottom: 10px;color: #666;}.item .price {font-size: 22px;color: firebrick;}.item .price::before {content: ¥;font-size: 14px;}.filter {display: flex;width: 990px;margin: 0 auto;padding: 50px 30px;}.filter a {padding: 10px 20px;background: #f5f5f5;color: #666;text-decoration: none;margin-right: 20px;}.filter a:active,.filter a:focus {background: #05943c;color: #fff;}/style
/headbodydiv classfiltera data-index1 hrefjavascript:;0-100元/aa data-index2 hrefjavascript:;100-300元/aa data-index3 hrefjavascript:;300元以上/aa hrefjavascript:;全部区间/a/divdiv classlist!-- div classitemimg src altp classname/pp classprice/p/div --/divscript// .filter a:active 是一个 CSS 选择器用于选择处于活动状态的 a 元素通常是用户正在点击或按住鼠标按钮时的状态。// 当用户点击或按住鼠标按钮时a:active 选择器会应用到 a 元素上从而可以通过 CSS 来改变其样式或进行其他操作。// 以下是一个示例// style// .filter a:active {// color: red;// font-weight: bold;// }// /style// div classfilter// a href#Link 1/a// a href#Link 2/a// a href#Link 3/a// /div// 在上述示例中当用户点击这些链接时活动状态的链接a 元素的文本颜色将变为红色并加粗显示。// 2. 初始化数据const goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.00,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,},{id: 4001594,name: 日式黑陶功夫茶组双侧把茶具礼盒装,price: 288.00,picture: https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg,},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 100.00,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488.00,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,},{id: 3997185,name: 与众不同的口感汝瓷白酒杯套组1壶4杯,price: 108.00,picture: https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg,},{id: 3997403,name: 手工吹制更厚实白酒杯壶套装6壶6杯,price: 99.00,picture: https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg,},{id: 3998274,name: 德国百年工艺高端水晶玻璃红酒杯2支装,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg,},]/script
/body/html 三、算法思路
1、封装渲染函数传入的参数为数组对象将数组中的每一个对象进行数据处理再渲染到页面中
2、利用事件委托为上方tab栏注册点击事件利用事件对象判断鼠标点击的是哪个价格区间再在数组中筛选出价格在该区间内的商品并返回一个新的数组对象
3、将新的数组对象作为参数传入渲染函数并调用 四、法一数组map方法和数组join方法
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title商品渲染/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.item:hover {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);transform: translate3d(0, -4px, 0);cursor: pointer;}.item img {width: 100%;}.item .name {font-size: 18px;margin-bottom: 10px;color: #666;}.item .price {font-size: 22px;color: firebrick;}.item .price::before {content: ¥;font-size: 14px;}.filter {display: flex;width: 990px;margin: 0 auto;padding: 50px 30px;}.filter a {padding: 10px 20px;background: #f5f5f5;color: #666;text-decoration: none;margin-right: 20px;}.filter a:active,.filter a:focus {background: #05943c;color: #fff;}/style
/headbodydiv classfiltera data-index1 hrefjavascript:;0-100元/aa data-index2 hrefjavascript:;100-300元/aa data-index3 hrefjavascript:;300元以上/aa hrefjavascript:;全部区间/a/divdiv classlist!-- div classitemimg src altp classname/pp classprice/p/div --/divscript// .filter a:active 是一个 CSS 选择器用于选择处于活动状态的 a 元素通常是用户正在点击或按住鼠标按钮时的状态。// 当用户点击或按住鼠标按钮时a:active 选择器会应用到 a 元素上从而可以通过 CSS 来改变其样式或进行其他操作。// 以下是一个示例// style// .filter a:active {// color: red;// font-weight: bold;// }// /style// div classfilter// a href#Link 1/a// a href#Link 2/a// a href#Link 3/a// /div// 在上述示例中当用户点击这些链接时活动状态的链接a 元素的文本颜色将变为红色并加粗显示。// 2. 初始化数据const goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.00,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,},{id: 4001594,name: 日式黑陶功夫茶组双侧把茶具礼盒装,price: 288.00,picture: https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg,},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 100.00,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488.00,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,},{id: 3997185,name: 与众不同的口感汝瓷白酒杯套组1壶4杯,price: 108.00,picture: https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg,},{id: 3997403,name: 手工吹制更厚实白酒杯壶套装6壶6杯,price: 99.00,picture: https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg,},{id: 3998274,name: 德国百年工艺高端水晶玻璃红酒杯2支装,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg,},]render(goodsList)const filter document.querySelector(.filter)filter.addEventListener(click, e {const { tagName, dataset } e.targetlet arr goodsListif (tagName A) {switch (dataset.index) {case 1:arr arr.filter(item item.price 0 item.price 100)breakcase 2:arr arr.filter(item item.price 100 item.price 300)breakcase 3:arr arr.filter(item item.price 300)break}render(arr)}})function render(arr) {document.querySelector(.list).innerHTML arr.map(item {const { name, price, picture } itemreturn div classitemimg src${picture} altp classname${name}/pp classprice${price}/p/div}).join()}/script
/body/html 五、法二数组forEach方法
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title商品渲染/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.item:hover {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);transform: translate3d(0, -4px, 0);cursor: pointer;}.item img {width: 100%;}.item .name {font-size: 18px;margin-bottom: 10px;color: #666;}.item .price {font-size: 22px;color: firebrick;}.item .price::before {content: ¥;font-size: 14px;}.filter {display: flex;width: 990px;margin: 0 auto;padding: 50px 30px;}.filter a {padding: 10px 20px;background: #f5f5f5;color: #666;text-decoration: none;margin-right: 20px;}.filter a:active,.filter a:focus {background: #05943c;color: #fff;}/style
/headbodydiv classfiltera data-index1 hrefjavascript:;0-100元/aa data-index2 hrefjavascript:;100-300元/aa data-index3 hrefjavascript:;300元以上/aa hrefjavascript:;全部区间/a/divdiv classlist!-- div classitemimg src altp classname/pp classprice/p/div --/divscript// .filter a:active 是一个 CSS 选择器用于选择处于活动状态的 a 元素通常是用户正在点击或按住鼠标按钮时的状态。// 当用户点击或按住鼠标按钮时a:active 选择器会应用到 a 元素上从而可以通过 CSS 来改变其样式或进行其他操作。// 以下是一个示例// style// .filter a:active {// color: red;// font-weight: bold;// }// /style// div classfilter// a href#Link 1/a// a href#Link 2/a// a href#Link 3/a// /div// 在上述示例中当用户点击这些链接时活动状态的链接a 元素的文本颜色将变为红色并加粗显示。// 2. 初始化数据const goodsList [{id: 4001172,name: 称心如意手摇咖啡磨豆机咖啡豆研磨机,price: 289.00,picture: https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg,},{id: 4001594,name: 日式黑陶功夫茶组双侧把茶具礼盒装,price: 288.00,picture: https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg,},{id: 4001009,name: 竹制干泡茶盘正方形沥水茶台品茶盘,price: 100.00,picture: https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png,},{id: 4001874,name: 古法温酒汝瓷酒具套装白酒杯莲花温酒器,price: 488.00,picture: https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png,},{id: 4001649,name: 大师监制龙泉青瓷茶叶罐,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png,},{id: 3997185,name: 与众不同的口感汝瓷白酒杯套组1壶4杯,price: 108.00,picture: https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg,},{id: 3997403,name: 手工吹制更厚实白酒杯壶套装6壶6杯,price: 99.00,picture: https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg,},{id: 3998274,name: 德国百年工艺高端水晶玻璃红酒杯2支装,price: 139.00,picture: https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg,},]render(goodsList)const filter document.querySelector(.filter)filter.addEventListener(click, e {const { tagName, dataset } e.targetif (tagName A) {let arr goodsListswitch(dataset.index){case 1:arr goodsList.filter(item item.price 0 item.price 100)breakcase 2:arr goodsList.filter(item item.price 100 item.price 300)breakcase 3:arr goodsList.filter(item item.price 300)break}render(arr)}})function render(arr) {let str arr.forEach(item {const { name, price, picture } itemstr div classitemimg src${picture} altp classname${name}/pp classprice${price}/p/div})const list document.querySelector(.list)list.innerHTML str}/script
/body/html
