JS DOM(五) 购物车案例

JavaScript0134

JS DOM(五) 购物车案例,第1张

 <style>

        table {

            border-collapse: collapse

        }

        td,

        th {

            border: 1px solid #ccc

            text-align: center

        }

        input {

            text-align: center

            width: 20px

            outline: none

        }

        img {

            width: 100px

        }

    </style>

</head>

<body>

    <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="total"></span>

                </td>

            </tr>

        </tfoot>

    </table>

    <script>

        let goodses = [{

            name: '苹果手机',

            img: "https://img12.360buyimg.com/n7/jfs/t1/212335/23/6412/83352/61a99591E098e28c1/03fd3bb84b20d97d.jpg",

            price: 300,

            count: 2,

            isck: false

        }, {

            name: '华为手机',

            img: "https://img11.360buyimg.com/n7/jfs/t1/147090/30/15709/47809/5fbe06d6E0eb8239d/a2e900f693d6e973.jpg",

            price: 200,

            count: 3,

            isck: true

        }, {

            name: '小米手机',

            img: "https://img13.360buyimg.com/n7/jfs/t1/201578/31/15673/77560/619479ceEd1bde507/c0dab826b71e0b84.jpg",

            price: 100,

            count: 8,

            isck: false

        }, {

            name: '中兴手机',

            img: "https://img11.360buyimg.com/n7/jfs/t1/138577/34/21237/197279/61790dbfE7274a47b/569c3d1be96793bd.jpg",

            price: 500,

            count: 4,

            isck: false

        }]

        // 加载商品信息方法

        function loadGoodses() {

            goodses.forEach(g =>{

                let tr = document.createElement('tr')

                    // 每个tr里面有7个td

                let td1 = document.createElement('td')

                let ck = document.createElement('input') //获取里面的输入框

                ck.type = 'checkbox' //获取输入框的按钮选项

                ck.className = 'ck' //这里只是添加一个标记

                    // 设置复选框的选中状态

                ck.checked = g.isck

                    // 设置复选框状态发生改变后的事件

                ck.onchange = function() {

                    // 更新商品的状态

                    g.isck = ck.checked

                        // 再次调用计算总计的方法

                    totalPrice()

                        // 判断是否需要更新全选复选的状态

                    document.querySelector('#ckAll').checked = goodses.every(r =>r.isck)

                }

                td1.appendChild(ck) //将获取到的输入框添加到td里面

                let td2 = document.createElement('td')

                td2.innerHTML = g.name //里面的文本等于数组中商品的name

                let td3 = document.createElement('td')

                let img = document.createElement('img')

                img.src = g.img

                td3.appendChild(img)

                    // td4显示单价

                let td4 = document.createElement('td')

                td4.innerHTML = '￥' + g.price.toFixed(2)

                    // td5显示数量

                let td5 = document.createElement('td')

                let btn1 = document.createElement('button')

                btn1.innerHTML = '-'

                    // 添加减按钮 注册点击事件

                btn1.onclick = function() {

                    g.count--

                        // 判断商品不能小于1

                        if (g.count <1) {

                            g.count = 1

                        }

                        // 更新商品数量

                    count.value = g.count

                        // 更新小计

                    td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                        // 更新总计数量，调用函数

                    totalPrice()

                }

                td5.appendChild(btn1)

                let count = document.createElement('input')

                count.value = g.count

                td5.appendChild(count)

                let btn2 = document.createElement('button')

                btn2.innerHTML = '+'

                btn2.onclick = function() {

                    g.count++

                        // 更新商品数量

                        count.value = g.count

                        // 更新小计

                    td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                        // 更新总计数量，调用函数

                    totalPrice()

                }

                td5.appendChild(btn2)

                    //单个商品的小计

                let td6 = document.createElement('td')

                td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                let td7 = document.createElement('td')

                let del = document.createElement('button')

                del.innerHTML = '删除'

                    // 添加删除事件

                del.onclick = function() {

                    // 删除tr标签

                    tr.remove()

                        // 根据商品的名称获取在数组中的位置

                    let index = goodses.findIndex(r =>r.name === g.name)

                        // 根据位置删除对应的商品

                    goodses.splice(index, 1)

                        // 更新总价 调用函数

                    totalPrice()

                }

                td7.appendChild(del)

                    // 将所有的td添加到tr中

                tr.appendChild(td1)

                tr.appendChild(td2)

                tr.appendChild(td3)

                tr.appendChild(td4)

                tr.appendChild(td5)

                tr.appendChild(td6)

                tr.appendChild(td7)

                    // 将tr 添加到tbody中

                document.querySelector('tbody').appendChild(tr)

            })

        }

        loadGoodses() //调用方法

        // 封装计算总金额的方法

        function totalPrice() {

            // 计算总计

            let money = goodses.filter(r =>r.isck).reduce((a, b) =>a + b.count * b.price, 0)

            // 显示总计

            document.querySelector('#total').innerHTML = '￥' + money.toFixed(2)

        }

        totalPrice()

        // 全选方法

        document.querySelector('#ckAll').onchange = function() {

            let cks = document.querySelectorAll('.ck')

                // 更新DOM

            cks.forEach(ck =>{

                    ck.checked = this.checked

                })

                // 更新数据

            goodses.forEach(g =>{

                    g.isck = this.checked

                })

                // 再次调用计算总计的方法

            totalPrice()

        }

    </script>

有很多方法可以实现，不过要看你的具体需求，一般可以做成两类题目，选单选的时候显示单选的题目，多选的时候显示多选的题目；如果是想同一个题目变换单选和多选的话可以用Jquery来操作单选和多选的HTML：

首先在选项上绑定事件，然后在事件中获取当前选择的是单选还是多选，然后通过类选择器或者标签选择器来获取选项前面的选择按钮组，用循环进行遍历拿到每一个单选/多选按钮，然后用append()方法在拿到的按钮后面添加要变换的按钮，最后把拿到的按钮删掉。

思路就是这样，具体代码需要的话可以后面再贴上。