写给why自己看的(购物车)

    <div class="header">页面顶部</div>
    <div class="content">
        <div class="top">
            <input type="checkbox"> 全选
        </div>
        <ul>
            <li>
                <div class="status">
                    <input type="checkbox">
                </div>
                <div class="show">
                    <img src="" alt="">
                </div>
                <div class="title">
                    asdhgaskjhdgkjasd
                </div>
                <div class="price">
                    ￥ 100.00
                </div>
                <div class="number">
                    <button>-</button>
                    <input type="text" value="1">
                    <button>+</button>
                </div>
                <div class="sub">
                    ￥ 100.00
                </div>
                <div class="destory">
                    <button>删除</button>
                </div>
            </li>
        </ul>
        <div class="bottom">
            <div class="totalNum">
                总件数 : 3
            </div>
            <div class="btns">
                <button>清空购物车</button>
                <button>去结算</button>
                <button>删除所有已选中</button>
            </div>
            <div class="totalPrice">
                总价格 : ￥ <span>100.00</span>
            </div>
        </div>

    </div>
    <div class="footer">页面底部</div>
    

jsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjs

    var cartList = JSON.parse(localStorage.getItem('car')) || [
    {
        id: 111234,
        status: true,
        pic: "https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332",
        name: "我是一个手机, 不知道是啥",
        price: 100,
        number: 3,
        total: 16,
    },
    {
        id: 123456,
        status: false,
        pic: "https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500",
        name: "我是一个电脑, 不知道是啥",
        price: 98.72,
        number: 1,
        total: 7,
    },
    {
        id: 965874,
        status: true,
        pic: "https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        name: "我是一个手纸, 不知道是啥",
        price: 356.21,
        number: 2,
        total: 22,
    },
];

//1、获取元素
var content = document.querySelector('.content')

//2、渲染页面函数
function bindHtml() {
    //2-1、创建变量
    var shopNum = 0 //勾选商品的勾选数量
    var shopTotal = 0//商品的总数
    var priceTotal = 0//商品的总价格
    for(var w = 0; w < cartList.length; w++){
        if(cartList[w].status){
            shopNum++
            shopTotal += cartList[w].number
            priceTotal += cartList[w].price*cartList[w].number
        }
    }
    //2—2、渲染上面
    var str = `
    <div class="top">
        <input type="checkbox" class="check_all" ${shopNum === cartList.length?"checked":""}> 全选
    </div>
    <ul>
    `
    //2—3、渲染li
    for(var q = 0; q < cartList.length; q++){
        str += `
        <li>
            <div class="status">
                <input type="checkbox" class="check_item" data-id="${cartList[q].id}" ${cartList[q].status?"checked":""}>
            </div>
            <div class="show">
                <img src="${cartList[q].pic}" alt="">
            </div>
            <div class="title">
            ${cartList[q].name}
            </div>
            <div class="price">
                ￥ ${cartList[q].price.toFixed(2)}
            </div>
            <div class="number">
                <button class="prev" data-id="${cartList[q].id}">-</button>
                <input type="text" value="${cartList[q].number}">
                <button class="next" data-id="${cartList[q].id}">+</button>
            </div>
            <div class="sub">
                ￥ ${(cartList[q].number*cartList[q].price).toFixed(2)}
            </div>
            <div class="destory">
                <button class="del_btn" data-id=${cartList[q].id}>删除</button>
            </div>
        </li>
        `
    }
    //2—4、渲染下面
    str += `
    </ul>
    <div class="bottom">
        <div class="totalNum">
            总件数 : ${shopTotal}
        </div>
        <div class="btns">
            <button class="clearAll">清空购物车</button>
            <button class="goPay" id="btn1">去结算</button>
            <button class="deletes" id="btn2">删除所有已选中</button>
        </div>
        <div class="totalPrice">
            总价格 : ￥ <span>${priceTotal.toFixed(2)}</span>
        </div>
    </div>
    `

    content.innerHTML = str
    if(shopNum === 0){
        btn1.disabled = true
        btn2.disabled = true
    }
    localStorage.setItem('car',JSON.stringify(cartList))
}
//2—5、调用页面渲染函数
bindHtml()

//3、事件委托
content.onclick = function(e) {
    //3—1、全选功能
    if(e.target.className === 'check_all'){
        for(var r = 0; r < cartList.length; r++){
            cartList[r].status = e.target.checked
        }
        bindHtml()
    }
    if(e.target.className === 'check_item'){
        for(var t = 0; t < cartList.length; t++){
            if(e.target.dataset.id - 0 === cartList[t].id){
                cartList[t].status = e.target.checked
            }
        }
        bindHtml()
    }

    //3-2、左边按钮减少功能
    if(e.target.className === 'prev'){
        // console.log('1111')
        for(var y = 0; y < cartList.length; y++){
            if(e.target.dataset.id - 0 === cartList[y].id){
                if(cartList[y].number > 1){
                    cartList[y].number --
                }else{
                    alert('您选择的商品数量不能小于1哦')
                }
            }
        }
        bindHtml()
    }

    //3-3、右边按钮增加功能
    if(e.target.className === 'next'){
        // console.log('2222')
        for(var u = 0; u < cartList.length; u++){
            if(e.target.dataset.id - 0 === cartList[u].id){
                if(cartList[u].number < cartList[u].total){
                    cartList[u].number ++
                }else{
                    alert('您选择的商品数量已达到库存')
                }
            }
        }
        bindHtml()
    }

    //3—4、删除功能制作
    if(e.target.className === 'del_btn'){
        if(!confirm('您确定要删除这件商品吗？')) return
        for(var i = 0; i < cartList.length; i++){
            if(e.target.dataset.id - 0 === cartList[i].id){
                cartList.splice(i,1)
            }
       }
       bindHtml()
    }

    //3-5、清空购物车
    if(e.target.className === 'clearAll'){
        if(!confirm('您确定要清空购物车吗？')) return
        cartList = ''
        bindHtml()
    }

    //3-5、结算
    if(e.target.className === 'goPay'){
        var money = document.querySelector('.totalPrice span')
        alert(`您一共需要支付：${money.innerHTML}元`)
    }

    //3-6、删除所有选中商品
    if(e.target.className === 'deletes'){
        if(!confirm('您确定要删除吗？')) return
        for(var p = 0; p < cartList.length; p++){
            if(cartList[p].status === true){
              cartList.splice(p,1)
              p--
            }
        }
        bindHtml()
    }
}