jQuery如何实现购物车

本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下 1 描述 *描述:1 点击减号,input值自减,更新小计,更新总计2 点击加

本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下

1.描述

/*
        描述:
            1.点击减号,input值自减,更新小计,更新总计
            2.点击加号,input值自加,更新小计,更新总计
            3.点击全选 设置li中的复选框按钮状态都为被选中状态
            4.点击反选 本来被选中的复选框设为未选中,未选中的设为选中
            5.点击每一个复选按钮,更新总计
            6.函数getAll用于设置总计
*/

2.HTML布局

<div>
        <button>全选</button><button>反选</button>
        <ul>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>9.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>19.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>99.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>999.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
        </ul>
        <p>一共0件商品, 共计 0.00 元</p>
</div>

3.引入jQuery文件

<script src="js/jquery.js"></script>

4.购物车实现

4.1 点击减号,input值自减,更新小计  小计:单价*数量

$('.cut').click(function () {
        // 获取对应输入框的值
        var num = $(this).next(':text').val();
        // console.log(num);
        if (num > 0) {
            // 自减
            num--;
        }
        // 更新输入框的值
        $(this).next(':text').val(num);
        // 小计
        var add = Number($(this).prev().text() * num).toFixed(2);
        $(this).nextAll('span').text(add);
 
        getAll(); // 总计
    });​

4.2. 点击加号,input值加1,更新小计 小计:单价*数量

$('.add').click(function () {
        // 获取对应输入框的值
        var num = $(this).prev().val();
        // 自加
        num++;
        // 更新输入框的值
        $(this).prev().val(num);
        // 小计
        var add = Number($(this).siblings('i').text() * num).toFixed(2);
        $(this).nextAll('span').text(add);
 
        getAll(); // 总计
 
    });

4.3 点击全选 将li中的复选按钮都设置成被选中状态 更新总计

 $('button').eq(0).click(function () {
        // 所有的复选按钮的都选中
        $(':checkbox').prop('checked', true);
 
        getAll(); // 总计
    });

4.4 点击反选 本来被选中的复选框设为未选中,未选中的设为选中 更新总计

$('button').eq(1).click(function () {
        // 遍历每一个复选框
        $(':checkbox').each(function (i, v) {
            // console.log(!v.cheacked);
            // $(v).prop('checked',!v.checked)
            // checked属性进行取反
            v.checked = !v.checked;
        });
 
        getAll(); // 总计
    });

4.5 点击每一个复选按钮,更新总计

$(':checkbox').click(getAll);

4.6 函数getAll用于设置总计

function getAll() {
        // 定义变量,分别用于存总数和总价
        var sum = 0;
        var allnum = 0;
        // 所有被选中的复选框
        var t = $(':checkbox:checked').each(function (i, v) {
            // console.log(Number($(v).nextAll('span').text()));
            // 所有被选中的复选框小计的总和
            sum += Number($(v).nextAll('span').text());
            //所有被选中的复选框的输入框值的总和
            allnum += Number($(v).nextAll(':text').val());
        });
        // 设置p的内容
        $('p').html('<p>一共' + allnum + '件商品, 共计 ' + sum.toFixed(2) + ' 元</p>');
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好代码网。

您可能有感兴趣的文章
jquery常用方法及如何使用示例汇总

jquery三大不同版本之间区别专家讲解

jQuery的三种$()

jQuery 核心函数以及jQuery对象

jquery常用函数与方法汇总