案例练习：购物车全选功能和自动计算价格功能

购物车案例

1.代码部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            width: 800px;
            height: 400px;
            border-bottom: 1px solid #000000;
            border-top: 1px solid #000000;
            margin: 10px auto;
            text-align: center;
        }
        input[type="number"]{
            width: 40px;
        }
        table,th {
            background-color: lightgray;
            border: none;
        }
        table , tr,td{
            background-color: #fff;
            border: none;
            /* border-top:1px solid #000000; */
            /* border-bottom:1px solid #000000; */
        }
        table , tr:last-of-type{
            /* border-top:1px solid #000000; */
            border-bottom:1px solid #000000;
        }
        table , tr:nth-last-of-type(2n) > td{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption><h2>购物车    </h2></caption>
        <tr>
            <th><input type="checkbox" id="quan" checked="true"><label for="quan">全选</label></th>
            <th>图片</th>
            <th>名称</th>
            <th>单位</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="1" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" class='check' checked="true"></td>
            <td>图片</td>
            <td>苹果</td>
            <td>台</td>
            <td class="price">4999</td>
            <td><input type="number" value="2" min=1 max=10></td>
            <td class="money">4999</td>
        </tr>
        <tr>
            <td colspan="5">共计</td>
            <td class="sum">5</td>
            <td class="amount">1000000</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    // 全选按钮功能
    $("#quan").change(ev=>$('.check').prop('checked',$(ev.target).prop('checked') ? true : false));
    $('.check').change(()=>$("#quan").prop('checked',[...$('.check')].every(item=>$(item).prop('checked'))?true:false));
    // 自动计算商品价格和总价
    autoComputer();
    function autoComputer(){
        let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
        let prices=[...$(".price")].map(item=>$(item).text()*1);
        let nums=[...$("input[type='number']")].map(item=>$(item).val()*1);
        let isnums=[nums,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
        let moneys=[prices,nums].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]));
        let ismoneys=[moneys,is].reduce((prev,curr)=>prev.map((item,index)=>item*curr[index]))
        $(".money").each((index,item)=>$(item).text(moneys[index]));
        $(".amount").text(ismoneys.reduce((prev,curr)=>prev+curr));
        $(".sum").text(isnums.reduce((prev,curr)=>prev+curr));
    }
    $("input[type='number']").change(()=>autoComputer());
    // 根据全选按钮计算数量和总价
    // let is=[...$(".check")].map(item=>$(item).prop("checked")?1:0);
    $("table input[type='checkbox']").change(()=>autoComputer());
</script>    
</html>

2.代码运行结果

3.案例分析：
1.全选按钮功能：
（1）全选触发，主要监听全选按钮的值，如果为true,就通过遍历各个商品的选中按钮设置为true;取消全选方法相同；而通过监听各个商品的选中按钮的值，经过数组函数every（）判断来设置全选按钮是否为全选
（2）调整商品数量自动计算商品价格：主要通过监听各个商品数量的变化触发自动计算函数来重新渲染出结果数据；
（3）未选中产品不参与最终结算（而单个商品价格还的计算）：通过遍历商品选中按钮的值返回一个数组（有0和1组成）；在计算商品数量和计算商品总价时，根据是否选中的值（1或0）来计算：如果为0时（未选中）在计算总数量时，商品数量0参与计算，选中时商品数量1参与计算；计算总价原理相同

购物车案例

相关文章