面向对象购物车

最新推荐文章于 2024-04-19 09:49:09 发布

原创最新推荐文章于 2024-04-19 09:49:09 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

JS 专栏收录该内容

91 篇文章

订阅专栏

本文探讨了如何使用JavaScript在前端实现一个面向对象的购物车功能，详细讲解了购物车的添加商品、删除商品、更新商品数量以及计算总价等核心操作。通过HTML5的数据存储特性，实现数据持久化，确保页面刷新后购物车内容不会丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>网页头部区域</header>
    <main>
        <ul></ul>
    </main>
    <a href="html/cart.html">
        <div class="count">
            商品共<span>0</span>件
        </div>
    </a>
    <!--json数据格式不能直接使用js文件引用，必须通过ajax请求-->
    <script src="js/ajax.js"></script>
    <script src="js/index.js"></script>
</body>

class List{
    constructor() {
        //获取元素
        this.container = document.querySelector('ul')
        this.span = document.querySelector('span')
        this.init()
    }
    init() {
        this.request()
        //注意点：data数据是发送请求获取到的，在初始化的时候直接调用代码，异步代码是没有返回结果的所以是undefined
        // this.cart()
        this.count()
    }
    request() {
        pAjax({url: 'data/goods.json'})
        .then((res)=>{
            let data = JSON.parse(res)
            data = data.slice(0, 60)
            this.render(data)
            this.cart(data)
        })
    }
    render(data) {
        data.forEach((item) => {
            this.container.innerHTML += `
                     <li>
                        <div class="pic">
                            <img src="${item.img_small_logo}">
                        </div>
                        <p class="title hide">${item.title}</p>
                        <p class="price">${item.price}</p>
                        <button data-id=${item.goods_id}>加入购物车</button>
                    </li>
                `
        })
    }
    cart(data){
        //做事件委派
        this.container.addEventListener('click', (e) => {
            e = e || window.event
            let target = e.target || e.srcElement
            //判断是否点击的是按钮
            if (target.nodeName == 'BUTTON') {
                //获取到每一个按钮的id
                let id = target.dataset.id - 0
                //当咱们点击对应的按钮的时候，获取到相应那条数据
                let goods = data.find((item) => { return item.goods_id == id })
                //先获取下购物车里面有没有数据，如果没有数据让它返回一个空数组
                let list = JSON.parse(localStorage.getItem('cart')) || []
                //判断里面有没有数据
                if (!list.length) {
                    //没有数据，如果能进到这个地方说明就是没有数据的
                    //没有数据，应该先把数据添加进数组，并让商品数量赋值为1
                    list.push(goods)
                    goods.cart_number = 1
                } else {
                    //如果有数据，先判断下数组里面有没有这条数据，防止重复存在
                    let res = list.some((item) => { return item.goods_id == id })
                    //如果数据相同，应该找到相同的数据让其商品数量自增+1
                    if (res) {
                        let index = list.findIndex((item) => { return item.goods_id == id })
                        list[index].cart_number++
                    } else {
                        //没有相同的，就把数据添加进数组
                        list.push(goods)
                        goods.cart_number = 1
                    }
                }
                //把对应的数据应该存储进购物车里面
                localStorage.setItem('cart', JSON.stringify(list))
                //当咱们点击按钮的时候，让商品数量进行变化
                this.count()
            }
        }, false)
    }
    count() {
        //先从购物车里面把数据提取出来
        let list = JSON.parse(localStorage.getItem('cart')) || []
        let num = 0
        //遍历进行数量增加
        list.forEach((item) => {
            num += item.cart_number
        })
        //给span标记进行赋值操作
        this.span.innerHTML = num
    }
}
new List()

<link rel="stylesheet" href="../css/cart.css">
</head>
<body>
    <div class="cartTable">
        <table>
            <thead>
                <tr>
                    <th>全选</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    <div class="footer">
        <div class="left">
            <input type="checkbox" value="" class="selectAll" />
            <span class="dlAll">删除</span>
        </div>
        <div class="rirght">
            <div class="allNum">已选商品<b class="totalNum">0</b>件</div>
            <div class="allCount">合计 ￥<b class="money">0</b></div>
            <div class="calc">结算</div>
        </div>
    </div>
    <script src="../js/cart.js"></script>
</body>

class Cart{
    constructor() {
        //获取元素
        this.cartTable = document.querySelector('.cartTable')
        this.tbody = document.querySelector('tbody')
        //获取数据
        this.data = JSON.parse(localStorage.getItem('cart')) || []
        //调用init方法
        this.init()
    }
    init(){
        this.render()
        this.bindHtml()
    }
    //根据数据渲染页面
    render() {
        this.tbody.innerHTML = ''
        //思考：列表页面如果添加了商品，购物车里面就有数据，如果没有添加就没有数据
        if (!this.data.length) {
            //如果没有数据就进入这里，给用户一个提示
            this.tbody.innerHTML = `
               <tr height="100">
                 <td colspan="6">  
                    <h1>您的购物车空空如也! 赶紧去购物吧<a href="../_index.html">Go</a></h1>
                 </td>
               </tr>
            `
        } else {
            this.data.forEach(item => {
                this.tbody.innerHTML += `
                <tr>
                    <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                    <td>
                        <img src="${item.img_small_logo}">
                        <span class="hide">${item.title}</span>
                    </td>
                    <td><span class="price">${item.price}</span></td>
                    <td>
                        <span class="sub" data-id="${item.id}">-</span>
                        <input type="text" value="${item.cart_number}" class="txt" data-id="${item.id}" />
                        <span class="add" data-id="${item.id}">+</span>
                    </td>
                    <td><span class="subTotal">${item.cart_number * item.price}元</span></td>
                    <td><span class="del" data-id="${item.id}" data-id="${item.id}">删除</span></td>
                </tr>
                `
            })
        }
    }
    //给html绑定各种事件
    bindHtml() {
        //做事件委派
        this.cartTable.addEventListener('click', (e) => {
            //事件对象兼容写法
            e = e || window.event
            //事件（目标事件）源兼容写法
            let target = e.target || e.srcElement
            //做全选功能
            if (target.className == 'selectAll') {
                console.log(this.data)
                //获取全选按钮的状态
                let type = target.checked
                //当咱们点击全选按钮的时候，让所有的单选按钮选中或未选中
                //思路：使用数据驱动页面，修改的是数组
                this.data.forEach(item => {
                    item.is_select = type
                })
                //当咱们把数据修改了应该重新渲染页面
                this.render()
            }
        }, false)
    }
}
new Cart()