jQuery实现购物车功能的案例

最新推荐文章于 2024-04-19 10:15:13 发布

呆呆怪兽

最新推荐文章于 2024-04-19 10:15:13 发布

阅读量3.8k

点赞数 10

分类专栏： jQuery案例文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45658984/article/details/104554337

版权

jQuery案例专栏收录该内容

8 篇文章 1 订阅

订阅专栏

用jquery写了一个购物车的案例

功能如下

1,全选按钮和单个复选框的功能

2,商品数量的加减

3,单个商品总价随着商品数量的增减变化

4,实现了商品总数的变化

5,实现所有商品价钱之和随着商品的件数变化而变化

6,添加了单个商品删除功能

7,添加了清空购物车功能

下面是代码展示

<body>
    <div class="box">
        <div class="title">
            <div><input class="allkinds" type="checkbox">全选</div>
            <div>单价</div>
            <div>数量/(多少)</div>
            <div>合计</div>
            <div>操作</div>
        </div>
        <div class="one">
            <div><input class="kinds" type="checkbox">生菜</div>
            <div class=" price">¥12.60</div>
            <div class="we">
                <button class="left">-</button>
                <input class="num" type="text" value="1">
                <button class="right">+</button>
            </div>
            <div class=" priceall">¥12.60</div>
            <button class="delete">删除</button>
        </div>
        <div class="one">
            <div><input class="kinds" type="checkbox">白菜</div>
            <div class=" price">¥8.00</div>
            <div class="we">
                <button class="left">-</button>
                <input class="num" type="text" value="1">
                <button class="right">+</button>
            </div>
            <div class=" priceall">¥8.00</div>
            <button class="delete">删除</button>
        </div>
        <div class="one">
            <div><input class="kinds" type="checkbox">花菜</div>
            <div class=" price">¥8.60</div>
            <div class="we">
                <button class="left">-</button>
                <input class="num" type="text" value="1">
                <button class="right">+</button>
            </div>
            <div class=" priceall">¥8.60</div>
            <button class="delete">删除</button>
        </div>
        <div class="one">
            <div><input class="kinds" type="checkbox">青菜</div>
            <div class=" price">¥12.50</div>
            <div class="we">
                <button class="left">-</button>
                <input class="num" type="text" value="1">
                <button class="right">+</button>
            </div>
            <div class=" priceall">¥12.50</div>
            <button class="delete">删除</button>
        </div>
        <div class="foot">
            <button class="over">清空商品</button> 你买了
            <h6></h6>件商品,一共是:
            <h5></h5>元
            <button>结算</button>
        </div>
    </div>
</body>

jQuery代码

$(function() {
    // 1.全选按功能模块
    $('.allkinds').change(function() {
        $('.kinds').prop('checked', $(this).prop('checked'))
    })

    $('.kinds').change(function() {
        // 用:checked选择器 直接查找被选中的元素
        //如果被选中的复选框的个数等于 所有复选框的个数,那就把全选给选上
        if ($('.kinds:checked').length === $('.kinds').length) {
            $('.allkinds').prop('checked', true)
        } else {
            $('.allkinds').prop('checked', false)
        }
    })

    //2.数量的加减模块
    //   加模块
    $('.right').click(function() {
        // 点击得到当前文本框的值,
        var i = $(this).siblings('.num').val();
        i++;
        //每次点击都加1,然后把值放进文本框中
        $(this).siblings('.num').val(i);
        //合计加模块
        var p = $(this).parent().siblings('.price').text()
            //截取从第二位开始    
        p = p.substr(1);
        // toFixed()方法保留几位小数,这里我需要计算后保留小数后两位
        var sum = (p * i).toFixed(2);
        $(this).parent('.we').siblings('.priceall').text("¥" + sum)
        sumall();
    })

    //  减模块
    $('.left').click(function() {
        // 点击得到当前文本框的值,
        var i = $(this).siblings('.num').val();
        //这里做一个判断.如果数量小于1,那就不执行自减;
        if ($(this).siblings('.num').val() > 1) {
            i--;
        } else {
            return false;
        }
        //每次点击都减1,然后把值放进文本框中
        $(this).siblings('.num').val(i);

        //合计减模块
        //p是单价
        var p = $(this).parent().siblings('.price').text()
        p = p.substr(1);
        var sum = (p * i).toFixed(2);
        $(this).parent('.we').siblings('.priceall').text("¥" + sum)
            // console.log(i, p);
        sumall();
    })

    //3 当我文本框的值发生变化,总价也要发生变化    
    $('.num').change(function() {
            //n是文本框修改后的值
            var n = $(this).val();
            // p是单价
            var p = $(this).parent().siblings('.price').text()
            p = p.substr(1);
            var sum = (p * n).toFixed(2);
            $(this).parent('.we').siblings('.priceall').text("¥" + sum)
            sumall();
        })
        //先调用一下,页面初始状态就可以获取到商品总数和花费总数
    sumall()
        //商品总数和花费总数
        //求和
    function sumall() {
        //总件数
        var count = 0;
        //总花费
        var money = 0;
        //遍历文本框的值,然后相加
        $.each($('.num'), function(i, ele) {
            count += parseInt($(ele).val());
        })
        $('.foot>h6').text(count)

        //花费
        $.each($('.priceall'), function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        })
        $('.foot>h5').text("¥" + money.toFixed(2))
    }
    // 想求得商品总数,就要遍历文本框的值 $.each()方法可以进行遍历


    //删除商品模块

    //单个删除
    $('.delete').click(function() {
            $(this).parent('.one').remove()
            sumall();
        })
        //一起删除
    $('.over').click(function() {
        $(this).parents().siblings('.one').remove()
        sumall();
    })

})

基本的购物车功能都已经实现了的.样式写的不太好希望大家理解
写的不是很好希望大家多多鼓励,有什么意见可以联系交流一下,我正在学.

成果图展示
样式没有写的太多,主要是实现的功能
在这里插入图片描述
希望有个大佬可以带我学,这样效率会比较高

呆呆怪兽

关注

10
点赞
踩
33

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现购物车功能的案例

用jquery写了一个购物车的案例功能如下1,全选按钮和单个复选框的功能2,商品数量的加减3,单个商品总价随着商品数量的增减变化4,实现了商品总数的变化5,实现所有商品价钱之和随着商品的件数变化而变化6,添加了单个商品删除功能7,添加了清空购物车功能下面是代码展示<body> <div class="box"> <div c...
复制链接

扫一扫

专栏目录