6.2 JS 解构的综合案例（渲染和筛选商品）

最新推荐文章于 2024-10-18 17:29:29 发布

k1076731326

最新推荐文章于 2024-10-18 17:29:29 发布

阅读量156

点赞数 3

文章标签： html5 javascript

本文链接：https://blog.csdn.net/k1076731326/article/details/139394559

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Goods List</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .list {
            width: 800px;
            height: 620px;
            border: 1px solid rgba(9, 8, 8, 0.777);
            margin: 0 auto;
        }

        .item {
            float: left;
            width: 250px;
            height: 280px;
            border: 1px solid gainsboro;
            margin: 20px 0 0 12px;
            padding: 0 12px;

        }

        .item img {
            width: 200px;
            height: 200px;
            margin: 0 13px;

        }

        .item .price {
            margin-top: 8px;
            color: red;
        }

        .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>
</head>

<body>
    <div class="filter">
        <a data-index="1" href="javascript:;">0-100元</a>
        <a data-index="2" href="javascript:;">100-300元</a>
        <a data-index="3" href="javascript:;">300元以上</a>
        <a href="javascript:;">全部区间</a>
    </div>
    <div class="list">
        <!-- <div class="item">
            <img src="" alt="">
            <p class="name"></p>
            <p class="price"></p>
        </div> -->
    </div>

    <script>
        const goodslist = [
            {
                'id': 1,
                'name': 'Apple iPhone 13 - 最新的智能手机，功能强大',
                'price': 999.99,
                'img': 'https://tse2-mm.cn.bing.net/th/id/OIP-C.45U6aP6N03S5VHclZwZqywHaHa?w=161&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
            },
            {
                'id': 2,
                'name': 'Samsung Galaxy S21 - 高性能的安卓手机',
                'price': 799.99,
                'img': 'https://tse3-mm.cn.bing.net/th/id/OIP-C.-nUojlg4g2r9VZ6xkJlZ0gHaHa?w=199&h=199&c=7&r=0&o=5&dpr=1.3&pid=1.7'
            },
            {
                'id': 3,
                'name': 'Sony WH-1000XM4 - 无线降噪耳机',
                'price': 149.99,
                'img': 'https://m.media-amazon.com/images/I/71o8Q5XJS5L._AC_SL1500_.jpg'
            },
            {
                'id': 4,
                'name': 'Dell XPS 13 - 超轻薄高性能笔记本电脑',
                'price': 299.99,
                'img': 'https://ts2.cn.mm.bing.net/th?id=OPAC.tQocxO3A4OHm1A474C474&o=5&pid=21.1&h=240&w=240&rs=1'
            },
            {
                'id': 5,
                'name': 'Apple Watch Series 6 - 多功能智能手表',
                'price': 9.99,
                'img': 'https://ts2.cn.mm.bing.net/th?id=OPAC.Z55ZpSFWUXMtMg474C474&o=5&pid=21.1&h=240&w=240&rs=1'
            },
            {
                'id': 5,
                'name': '宝格丽（Bvlgari）DIVAS’ DREAM 项链361251',
                'price': 99.99,
                'img': 'https://img14.360buyimg.com/n1/jfs/t1/190712/9/37317/24235/65291e47F0ce0a813/952a1f1675935723.jpg'
            }
        ]

        //1渲染函数 封装
        function render(arr) {
            let str = ''
            arr.forEach(item => {
                const { name, price, img } = item
                str += `
                 <div class="item">
                <img src=${img} alt="">
                <p class="name">${name}</p>
                <p class="price">￥${price}</p>
                </div>
                `
            })
            document.querySelector('.list').innerHTML = str
        }
        render(goodslist)

        //2过滤筛选
        document.querySelector('.filter').addEventListener('click', e => {
            if (e.target.tagName == 'A') {
                let arr = goodslist
                if (e.target.dataset.index === '1') {
                    arr = goodslist.filter(item => item.price > 0 && item.price <= 100)
                } else if (e.target.dataset.index === '2') {
                    arr = goodslist.filter(item => item.price >= 100 && item.price <= 300)
                } else if (e.target.dataset.index === '3') {
                    arr = goodslist.filter(item => item.price >= 300)
                }
                render(arr)
            }
        })
    </script>
</body>

</html>