jq购物车案例

文章目录

• 前言
• 购物车案例操作步骤
  • 1.画页面
  • 2.设置css样式
  • 3.引入jq文件
  • 4.设置jq样式
• 总结

---

前言

提示：在逛淘宝，京东网站中，我们会见到很多的购物车项目，接下来我就通过jq代码来实现一个简单的购物车案列。

---

提示：以下是本篇文章正文内容，下面案例可供参考

操作步骤

1.先画出简单的页面

 页面样式

<table>
        <thead>
            <tr>
                <th><input type="checkbox" id="ckAll"></th>
                <th>名称</th>
                <th>图片</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td colspan="7" style="text-align: right;">
                    <span>总计：</span>
                    <span id="totalPrice"></span>
                </td>
            </tr>
        </tfoot>
    </table>

 2.设置css样式

<style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 5px 10px;
            text-align: center;
        }

        img {
            width: 100px;
        }

        input {
            width: 30px;
            text-align: center;
        }
    </style>

  3.引入jq库

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

 4.设置jq效果 

<script>
        // 商品数组
        let googs = [{
            name: "小米电视",
            img: "https://img10.360buyimg.com/n7/jfs/t1/191875/30/12237/92943/60e7a579E659a064c/f01cc6a90227c8f9.jpg",
            price: '3999',
            count: 2,
            isCk:true
        }, {
            name: "苹果手机",
            img: "https://img10.360buyimg.com/n7/jfs/t1/194022/20/10996/153505/60dc4c14Ea44f43f3/fa8c882d1fe46f4e.jpg",
            price: '6999',
            count: 4,
            isCk:false
        }, {
            name: "佳能相机",
            img: "https://img13.360buyimg.com/n7/jfs/t1/35828/26/5078/324781/5cbea100Eb22bb637/4d2d5e3bcd86fba4.jpg",
            price: '5999',
            count: 1,
            isCk:true
        }, {
            name: "西门子冰箱",
            img: "https://img13.360buyimg.com/n7/jfs/t1/188369/35/12392/145765/60e80460Eeebbc341/b50466dc4b98591d.jpg",
            price: '9999',
            count: 3,
            isCk:false
        }]

        // 循环数组，创建tr
        googs.forEach(g => {
            let tr = $('<tr>')
            let td0 = $('<td>').append($('<input type="checkbox" class="ck">').prop('checked',g.isCk))
            let td1 = $('<td>').html(g.name)
            let td2 = $('<td>').append($('<img>').attr('src', g.img))
            let td3 = $('<td>').html(g.price)
            let td4 = $('<td>').append($('<button class="jian">').html('-'))
                .append($('<input>').val(g.count))
                .append($('<button class="jia">').html('+'))
            let td5 = $('<td>').html(g.price * g.count)
            let td6 = $('<td>').append($('<button class="del">').html('删除'))

            tr.append(td0)
            tr.append(td1)
            tr.append(td2)
            tr.append(td3)
            tr.append(td4)
            tr.append(td5)
            tr.append(td6)
            $('tbody').append(tr)
        })

        // 给全选复选框注册点击事件
        $('#ckAll').click(function(){
            // attr()方法，用于获取 或 设置 元素的属性
            // prop()方法，也是用于获取 或 设置 元素的属性
            // 该方法，在读取bool值属性时返回的是true和false，在设置bool值属性时可以直接传true和false
            $('.ck').prop("checked",$('#ckAll').prop("checked"))

            //将复选框的状态更新回数据
            $('.ck').each(function(index,dom){
                googs[index].isCk = $(dom).prop("checked")
            })

            // 调用显示总价的方法
            totalPrice()
        })

        // 给其他复选框设置点击事件
        $('.ck').click(function(){
            $('#ckAll').prop('checked',[...$('.ck')].every(dom=>$(dom).prop('checked')))

            //将复选框的状态更新回数据
            $('.ck').each(function(index,dom){
                googs[index].isCk = $(dom).prop("checked")
            })

            // 调用显示总价的方法
            totalPrice()
        })

        // 删除按钮点击事件
        $('.del').click(function(){
            // 获取当前行的索引
            let index = $(this).parents("tr").index()
            // 删除当前行
            $(this).parents("tr").remove()
            // 删除当前行对应的数据
            googs.splice(index,1)
            
            // 调用显示总价的方法
            totalPrice()
        })

        // 减按钮点击事件
        $('.jian').click(function () {
            // 获取文本框里面的值
            let val = parseInt($(this).next('input').val())
            if (--val <= 0) val = 1
            // 更新文本框里面的值
            $(this).next('input').val(val)
            // 获取当前行的索引
            let index = $(this).parents('tr').index()
            // 更新对应商品的数量
            let g = googs[index]
            g.count = val
            // 更新显示小计
            $(this).parent().next('td').html(g.count * g.price)
            // 调用显示总价的方法
            totalPrice()
        })
        // 加按钮点击事件
        $('.jia').click(function () {
            // 获取文本框里面的值
            let val = parseInt($(this).prev('input').val())
            val++
            // 更新文本框里面的值
            $(this).prev('input').val(val)
            // 获取当前行的索引
            let index = $(this).parents('tr').index()
            // 更新对应商品的数量
            let g = googs[index]
            g.count = val
            // 更新显示小计
            $(this).parent().next('td').html(g.count * g.price)
            // 调用显示总价的方法
            totalPrice()
        })

        // 显示总价
        function totalPrice() {
            let totalPrice = googs.filter(r=>r.isCk===true).map(r => r.price * r.count).reduce(function (a, b) {
                return a + b
            }, 0)
            $('#totalPrice').html(totalPrice)
        }
        // 调用显示总价的方法
        totalPrice()
    </script>

---

总结

提示：购物车案列非常值得目前在学js和jq的小伙伴们，大家一起相互学习吧❥