很奇怪的js,ajax的问题，关于添加到购物车及点击删除的，就类似京东商城的那样。

JavaScript012

很奇怪的js,ajax的问题，关于添加到购物车及点击删除的，就类似京东商城的那样。,第1张

初步怀疑你的删除事件绑定有问题：新加入的DOM元素未绑定到事件。这种情况应该使用事件委派来做，你用 jQuery 吗？假设你的购物车列表的 HTML 结构如下：

<ul id="cartList">

    <li>

        购物车商品1

        <button>删除</button>

    </li>

    <li>

        购物车商品2

        <button>删除</button>

    </li>

    ……

</ul>

则删除购物车商品的代码为（用了 jQuery）：

$('#cartList').on('click', 'button', function() {  // 委派 button 的点击事件

    $(this).parent().remove()  // 移除购物车里当前商品

})

 <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>

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0padding: 0}

    #div_id p{width:80pxheight:30pxtext-align: leftborder: 1px solid #000line-height: 30px}

    #div_id p button{float:rightheight:30px}

</style>

<script src = "js/tool.js"></script>

    <script>

     window.onload = function(){

var div = document.getElementById("div_id")

     var button = document.getElementsByTagName("button")

         for(var i = 0 i < button.length - 1 i++){

          button[i].onclick = function(){

          alert("加入购物车成功")

          var p = document.createElement("p")

          var pContent = document.createTextNode(this.innerHTML)

p.appendChild(pContent)

          div.appendChild(p)

                    var delBtn = document.createElement("button")

                    var delBtnContent = document.createTextNode("x")

delBtn.appendChild(delBtnContent)

p.appendChild(delBtn)

                    delBtn.onclick = function(){

                     div.removeChild(p)

                    }

                    //setCookie("购物",div.innerHTML,getDate(100))

          }

         }

         var isTrue = false

            var button1 = document.getElementById("button_id")

            button1.onclick = function(){

             if(isTrue == false){

button1.innerHTML ="隐藏购物车"

isTrue = true

/*if(getCookie("购物") != undefined){

div.innerHTML = getCookie("购物")

}*/

div.style.display = "block"

}else if(isTrue){

button1.innerHTML ="显示购物车"

isTrue = false

div.style.display = "none"

/*if(getCookie("购物") != undefined){

div.innerHTML = getCookie("购物")

div.style.display = "none"

}*/

}

}

}

    </script>

</head>

<body>

<button>商品1</button>

<button>商品2</button>

<button>商品3</button>

<button>商品4</button>

<button>商品5</button><br/><br/>

<button id = "button_id">显示购物车</button>

<div id = "div_id" style="display:none"></div>

</body>

</html>