码迷,mamicode.com
首页 > Web开发 > 详细

购物车前端页面jquery效果的实现

时间:2019-01-09 14:16:23      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:ext   imu   parse   code   这一   lan   png   https   utf-8   

技术分享图片

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车的基本实现</title>
</head>
<body>
<h2>购物车的基本实现</h2>
全部商品<font color="red"><b>{$count}</b></font>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th><input type="checkbox" name="check" value="">全选</th>
        <th>商品图片</th>
        <th>商品名称</th>
        <th>商品属性</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>

    {volist name="data" id="v"}
    <tr>
        <td><input type="checkbox" name="check" class="check" value="{$v.sid}"></td>
        <td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547012448308&di=356338333063fa0fb4d902fc7ea994c5&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D1887458228%2C1232896188%26fm%3D214%26gp%3D0.jpg" alt="商品图片" width="100" height="100"></td>
        <td>{$v.goods_name}</td>
        <td>
            <span>颜色:{$v.color_val}</span><br>
            <span>尺寸:{$v.size_val}</span>
        </td>
        <td><span class="unit">{$v.unit_price}</span></td>
        <td>
            <input type="button" value="-" class="jian">
            <span class="num">{$v.num}</span>
            <input type="button" value="+" class="jia">
        </td>
        <td class="subtotal">{$v.subtotal}</td>
        <td>
            <a href="#">删除</a>
        </td>
    </tr>
    {/volist}
</table>

<div style="margin-left: 250px;">
    已选择<span class="goods_num">0</span>件商品 总价(不含运费):¥<span class="goods_price"></span> <a href="#">结算</a>
</div>

<script src="__STATIC__/js/jquery.js"></script>
<script>
    //拿出来一张白纸(定义一个空数组)
    var arr = [];
    //定义一个全局数组,用来收集和计算总价
    var price = [];

    //点击加号实现的效果
    $(document).on(click,.jia,function () {
        //获取数量
        var num = $(this).prev().text();
        //自增1
        var last_num = parseInt(num)+1;
        //替换
        $(this).prev().text(last_num);

        //获取单价
        var unit_price = $(this).parents("tr").find(".unit").text();
        //计算出小计的总价
        var sum_price = unit_price*last_num;
        //替换小计这一部分的节点td
        $(this).parents("tr").find(".subtotal").text(sum_price);

    });
    //点击减号实现的效果
    $(document).on(click,.jian,function () {
        //获取数量
        var num = $(this).next().text();
        //自增1
        var last_num = parseInt(num)-1 <= 1 ? 1 : parseInt(num)-1;
        //替换
        $(this).next().text(last_num);

        //获取单价
        var unit_price = $(this).parents("tr").find(".unit").text();
        //计算出小计的总价
        var sum_price = unit_price*last_num;
        //替换小计这一部分的节点td
        $(this).parents("tr").find(".subtotal").text(sum_price);
    })
    //点击多选框实现数量的统计
    $(document).on(click,.check,function () {
        var obj = $(this);
        // console.log(obj[0].checked);
        // return;
        //获取多选框的值(拿到名字)
        var check_val = $(this).val();
        //给数组追加元素(给纸上写名字)
        if(obj[0].checked){
            arr.push(check_val);
            //计算价格
            var xiaoji = $(this).parents("tr").find(".subtotal").text();
            price.push(xiaoji);
        }else{
            arr.splice($.inArray(check_val,arr),1);
            price.splice($.inArray(xiaoji,price),1)
        }

        //计算数组的长度,然后替换
        $(".goods_num").text(arr.length)




        //计算价格
        var str = 0;
        $.each(price,function (k,v) {
            str += parseInt(v);
        })
        $(".goods_price").text(str);


    })
</script>
</body>
</html>

 

购物车前端页面jquery效果的实现

标签:ext   imu   parse   code   这一   lan   png   https   utf-8   

原文地址:https://www.cnblogs.com/hopelooking/p/10243925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!