溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery實現(xiàn)購物車數(shù)量加減，價格計算功能

發(fā)布時間：2020-06-10 10:22:24 來源：網(wǎng)絡(luò) 閱讀：10471 作者：frwupeng517 欄目：web開發(fā)

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寫死寬高并設(shè)置overflow-y:scroll;，出現(xiàn)大量內(nèi)容時，讓table縱向滾動-->
       <div class="cartBox"> 
            <table class="cart">
                <thead>
                <tr>
                    <th>菜品名稱</th>
                    <th>數(shù)量</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(){
    //修改數(shù)量
    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); //保留小數(shù)點后面兩位小數(shù)
    $(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(){
    //修改數(shù)量
    var n=$(this).prev().html();
    var num=parseInt(n)-1;
    if(num==0){return;}//數(shù)量減到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代碼，最終頁面截圖如下：

jquery實現(xiàn)購物車數(shù)量加減，價格計算功能

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手