动态生成商品列表 

<!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="search">
        <input type="text" id="kd">
        <button id="btn">搜索</button>
    </div>
    <ul id="list">
        <li>
            <img src="" alt="">
            <h3></h3>
            <p></p>
            <strong></strong>
        </li>
    </ul>
    <script>
        // var arr = [
        //     ['vivo手机', '拍照真垃圾', '￥9.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng1', '学习使我快乐', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng2', '教的真好啊', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng1', '学习使我快乐', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng2', '教的真好啊', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        //     ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
        // ]


        var arr2 = [
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: '手机1',
                describe: '学完还有对象了',
                price: '$9.9'
            },
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: '手机2',
                describe: '学完还有对象了2',
                price: '$99.9'
            },
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: '电脑1',
                describe: '学完还有对象了',
                price: '$9.9'
            },
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: '电脑2',
                describe: '学完还有对象了2',
                price: '$99.9'
            },
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: 'qianfeng4',
                describe: '学完还有对象了',
                price: '$9.9'
            },
            {
                img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
                title: 'qianfeng4',
                describe: '学完还有对象了2',
                price: '$99.9'
            },
        ]

        $('list').innerHTML = renderList(arr2)

        // 实现搜索

        // var arr = [1, 2, 3, 4];
        // // 找到大于2的数  --- 返回一个新的数组
        // var res = arr.filter(function (val) {
        //     return val > 2
        // })

        // var res = arr2.filter(function (val) {
        //     return val.title.includes('手机')
        // })

        // console.log(res);

        $('btn').onclick = function () {
            // 拿到用户输入的关键字
            var keyword = $('kd').value;
            // 找到满足条件的数据
            var res = arr2.filter(function (val) {
                // 判断数据中的标题中是否包含此关键字
                return val.title.includes(keyword)
            })
            $('list').innerHTML = renderList(res)
        }



        function renderList(arr2) {
            var html = '';
            // 首先遍历数据  -- 有多少条数据，就有多少个li

            // val实际上数组的值  实际上就是一个对象
            arr2.forEach(function (val) {
                html += `
            <li>
                <img src="${val.img}" alt="">
                <h3>${val.title}</h3>
                <p>${val.describe}</p>
                <strong>${val.price}</strong>
            </li>
            `
            })
            console.log(html);
            return html
        }


        function $(id) {
            return document.getElementById(id)
        }




    </script>
</body>

</html>

 

posted @ 2021-07-07 18:41  JSkolo_yyds  阅读(216)  评论(0)    收藏  举报