值得观看的模拟购物车功能

最新推荐文章于 2024-03-02 10:54:49 发布

喵俺第一专栏

最新推荐文章于 2024-03-02 10:54:49 发布

阅读量3.2k

点赞数 3

分类专栏： # JS经典案例文章标签： JS HTML 前端

本文链接：https://blog.csdn.net/dengfengling999/article/details/124066617

版权

JS经典案例专栏收录该内容

9 篇文章 5 订阅

订阅专栏

页面功能：

当点击全选按钮时，所有的单选按钮被选中，并在，小计和下方总计显示价格

当点击+和-按钮时，数量进行改变，小计页同样进行改变

详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-collapse: collapse;
            margin-top: 30px;
            margin-bottom: 30px;
            width: 600px;
            text-align: center;
        }

        td,
        th {
            width: 120px;
        }

        button {
            border: 0;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><button class="all">全选</button></th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="getGoods"> </td>
            <td>电脑</td>
            <td class="price">200</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">200</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="getGoods"> </td>
            <td>手机</td>
            <td class="price">100</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">100</td>
            <td>删除</td>
        </tr>
    </table>
    <div>
        <span>总计：</span>
        <span class="sum">0</span>
    </div>
    <script>
        //<script src="./jq.js">引入JQuery


        //加载页面时调用总价函数
        getSum();

        //1.加减功能

        //加法，通过add类名，获取button按钮add
        $(".add").click(function () {//当+按钮点击时
            // 1.1 算出数量变化
            let num = parseInt($(this).prev().text());//获取span的值，$this代表 <button class="add">+</button> .prve()上边的元素.text内容
            //获得的内容是String通过parseInt转换为整数
            num++;
            $(this).prev().text(num);//加加之后再进行赋值
            // 1.2 算出 小计价格
            let price = parseInt($(this).parent().prev().text());//获取price价格，通过add按钮获取父元素，再获取上一元素，在类型转换
            $(this).parent().next().text(price * num);//通过add按钮获取父元素，再获取下一元素，再进行赋值，在类型转换

            // 调用 总价
            getSum();
        })
        //加法，通过add类名，获取button按钮jian
        $(".jian").click(function () {
            // 1.1 算出数量变化
            let num = parseInt($(this).next().text());//获取span的值，$this代表 <button class="add">+</button> .next()下边的元素.text内容
            //获得的内容是String通过parseInt转换为整数
            num--;
            if (num < 1) {
                num = 1;
            }
            $(this).next().text(num);//减减之后再进行赋值
            // 1.2 算出 小计价格
            let price = parseInt($(this).parent().prev().text());//获取price价格，通过add按钮获取父元素，再获取上一元素，在类型转换
            $(this).parent().next().text(price * num);//通过add按钮获取父元素，再获取下一元素，再进行赋值，在类型转换

            // 调用 总价
            getSum();
        })

        // 2.总价 = 小计之和（选中条件下）设计函数
        function getSum() {
            let sum = 0;
            for (let i = 0; i < $('.total').length; i++) {//$('.total').length每点击一次后的小计得长度
                // 添加 选中判断的条件
                if ($('.total').eq(i).parent().find('input').prop('checked')) {
                    sum += parseInt($('.total').eq(i).text())//获取每一次小计的值
                }
            }
            $('.sum').text(sum);//给下方span总数进行赋值
        }

        // 3. 选中
        // 选中：有三种表现形式  
        // 1> 用户点击 出现 √    
        // 2> 添加属性 checked    
        // 3> js操作  attr()   /  prop('checked',true)

        // 3.1 全选
        $('.all').click(function () {//当全选按钮all点击时
            $('.getGoods').prop('checked', true);//让所有的单选按钮getGood选中
            // 调用 总价
            getSum();
        });
        // 3.2 用户选中
        $('.getGoods').click(function () {
            // 用户点击，其实已经选中了

            // 调用 总价
            getSum();
        });
    </script>
</body>

</html>

结果：

当点击第一个单选框时：

当点击按钮+时：

当点击按钮-时：

当点击全选按钮时：

喵俺第一专栏

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
值得观看的模拟购物车功能

页面功能：当点击全选按钮时，所有的单选按钮被选中，并在，小计和下方总计显示价格当点击+和-按钮时，数量进行改变，小计页同样进行改变详细代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫