Erlo

jQuery复习 简单实现购物车功能

时间:2019-01-12 14:02   阅读:21次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

每天记录自己在学校学到的点点滴滴,让每天的生活过的更加充实!加油!

注:本次案例简单实现购物选择的功能!

实现效果:添加部分产品,左边为勾选框,右边为商品和数量选择,数量可以增加或减少,只有复选框勾选的时候,添加产品才可以显示所需金额,下方为商品总价格!

html代码:

<table id="tb1">
            <tr>
                <td>勾选状态</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>数量</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>空调</td>
                <td class="auto-style1">2400</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>长虹电视</td>
                <td class="auto-style1">2600</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>小米3</td>
                <td class="auto-style1">2200</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>BlurAir空气净化器</td>
                <td class="auto-style1">5000</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>三星显示器</td>
                <td class="auto-style1">2000</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
        </table>
        &nbsp;<h3>总价格:<span id="spNumber"></span></h3>

Jquery代码:

<script type="text/javascript">

            $(document).ready(function () {
                $(".sum").click(function () {    添加产品数量
                    var tdlist = $(this).next("input").val();   获取文本框数量值
                    var number = parseInt(tdlist) + 1;  加一
                    var sum = 0;
                    $(this).next("input").val(number);
                    getSum();
                });
                $(".min").click(function () {   减少产品数量
                    var tdlist = $(this).prev("input").val();
                    if (tdlist > 0) {   数量不能为负
                        var number = parseInt(tdlist) - 1;  减一
                        $(this).prev("input").val(number);
                        getSum();
                    }
                });
                $(".a").click(function () {
                    getSum();
                })
                function getSum() {   获取产品总金额
                    var trlist = $("#tb1").find("tr:gt(0)");
                    var sum = 0;
                    trlist.each(function () {
                        var check = $(this).find("input[type='checkbox']").prop("checked");  勾选框为true
                        if (check == true) {
                            var monery = $(this).find(".auto-style1").text(); 获得商品单价
                            var number = $(this).find("input:text").val();    选择商品数量
                            var s = parseInt(monery) * parseInt(number);  相乘
                            sum += s;
                        }
                        $("#spNumber").text(sum);  赋值
                    });
                }
            });
    </script>

代码到这里就结束啦!后边还会再加一些功能!再接再厉!

 

下一篇:利用js编写一个简单的html表单验证,验证通过时提交数...

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2019-01-21 06:26:30Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 笔记分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部