jquery练习01_购物车(全网最强jquery练习)

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。

以下是一个简单的购物车示例，使用jQuery来增加和减少商品数量，并计算总价：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车练习</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<table id="cart">
    <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
    <tr>
        <td>商品A</td>
        <td>$100</td>
        <td>
            <button class="minus-item">-</button>
            <input class="items-count" type="text" value="1">
            <button class="plus-item">+</button>
        </td>
        <td class="product-line-price">$100</td>
    </tr>
    <!-- 其他商品行 -->
</table>
 
<button id="clear-cart">清空购物车</button>
<div class="total-price">总计: <span>$0</span></div>
 
<script>
    $(document).ready(function(){
        $('.plus-item').click(function(){
            var $input = $(this).parent().find('input.items-count');
            $input.val(parseInt($input.val(), 10) + 1);
            updateCartTotal();
        });
 
        $('.minus-item').click(function(){
            var $input = $(this).parent().find('input.items-count');
            if (parseInt($input.val(), 10) > 0) {
                $input.val(parseInt($input.val(), 10) - 1);
                updateCartTotal();
            }
        });
 
        function updateCartTotal() {
            var total = 0;
            $('#cart .product-line-price').each(function(){
                total += parseFloat($(this).text().replace(/[^\d.]/g, ''));
            });
            $('.total-price span').text('$' + total.toFixed(2));
        }
 
        $('#clear-cart').click(function(){
            if (confirm("确定要清空购物车吗？")) {
                $('#cart .items-count').val(0);
                updateCartTotal();
            }
        });
 
        updateCartTotal();
    });
</script>
 
</body>
</html>

这段代码包括了基本的购物车功能：

使用加号和减号按钮增加或减少商品数量。
商品小计随数量变动自动更新。
总计价格实时计算。
提供清空购物车的按钮，点击后会清空购物车内的所有商品数量。

请注意，这个示例没有处理异常情况，例如输入值非数字的情况，在实际应用中应该添加相应的错误处理。

jquery练习01_购物车(全网最强jquery练习)

评论已关闭

推荐阅读