jquery实现购物车数量加减,价格计算功能
更新:HHH   时间:2023-1-7


HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>A03号桌</title>
    <link rel="stylesheet" href="resources/css/main.css">
</head>
<body>
    <!--购物车-->
    <div class="shopCart"> 
    <!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;,出现大量内容时,让table纵向滚动-->
       <div class="cartBox"> 
            <table class="cart">
                <thead>
                <tr>
                    <th>菜品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>价格</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>大闸蟹</td>
                    <td>
                        <button class="add">+</button>
                        <span class="count">1</span>
                        <button class="reduce">-</button>
                    </td>
                    <td>
                        ¥<span class="price">68.00</span>
                    </td>
                    <td>
                        ¥<span class="sub_total">68.00</span>
                    </td>
                </tr>
                <tr>
                    <td>在天愿作比翼鸟</td>
                    <td>
                        <button class="add">+</button>
                        <span class="count">1</span>
                        <button class="reduce">-</button>
                    </td>
                    <td>
                        ¥<span class="price">68.00</span>
                    </td>
                    <td>
                        ¥<span class="sub_total">68.00</span>
                    </td>
                </tr>
                <tr>
                    <td>红嘴绿鹦哥</td>
                    <td>
                        <button class="add">+</button>
                        <span class="count">1</span>
                        <button class="reduce">-</button>
                    </td>
                    <td>
                        ¥<span class="price">68.00</span>
                    </td>
                    <td>
                        ¥<span class="sub_total">68.00</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <ul class="totalInfo clearfix">
            <li>
                <span class="total">
                合计:<i>¥</i><b>242.00</b>
                </span>
            </li>
            <li>
                <button class="btn-save">保存</button>
            </li>
        </ul>
    </div>


<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/shopCart.js"></script>
</body>
</html>


JS代码:

/****点击增加按钮****/
$('.add').click(function(){
    //修改数量
    var n=$(this).next().html();
    var num=parseInt(n)+1;
    $(this).next().html(num);
    //计算价格
    var c= $(this).parent().siblings().children('.price').html();
    parseInt(c);
    var subPrice = num * c;
    var sub_price = subPrice.toFixed(2); //保留小数点后面两位小数
    $(this).parent().siblings().children('.sub_total').html(sub_price);

    //计算总价
    var total=0;
    $('.sub_total').each(function(){
        var price=parseInt($(this).html());
        total+=price;
        var total_price = total.toFixed(2);
        $('.total b').html(total_price);
    });
});


/****点击减少按钮****/
$('.reduce').click(function(){
    //修改数量
    var n=$(this).prev().html();
    var num=parseInt(n)-1;
    if(num==0){return;}//数量减到0就能再减了
    $(this).prev().html(num);

    //计算价格
    var c= $(this).parent().siblings().children('.price').html();
    parseInt(c);
    var subPrice = num * c;
    subPrice.toFixed(2);
    var sub_price = subPrice.toFixed(2);
    $(this).parent().siblings().children('.sub_total').html(sub_price);

    //计算总价
    var total=0;
    $('.sub_total').each(function(){
        var price=parseInt($(this).html());
        total+=price;
        var total_price = total.toFixed(2);
        $('.total b').html(total_price);
    });
});


考虑到篇幅问题,没有贴出CSS代码,最终页面截图如下:

返回web开发教程...