Jquery购物车模块-计算总件数和总额

最新推荐文章于 2023-09-23 10:37:59 发布

申申あ

最新推荐文章于 2023-09-23 10:37:59 发布

阅读量1.3k

点赞数

分类专栏： Jquery 文章标签：前端 jquery

本文链接：https://blog.csdn.net/qq_43781887/article/details/125751472

版权

本文介绍了如何使用Jquery实现购物车功能，包括计算商品总件数和总价。通过定义一个函数，遍历每个模块的件数和价格进行累加，注意需将字符串类型转换为数值类型。在点击加减按钮前需调用该函数进行初始化。示例代码展示了具体实现过程。

摘要由CSDN通过智能技术生成

首先来看布局：

布局非常简单，这里就不多说了，直接来看功能实现部分，首先因为每次每个模块点+或者-都会更改下面的总件数和总价，所以直接写一个函数来获取总件数和总价，然后当点击+或者-号的时候就调用这个函数即可。

那么这个函数的思路如下：
1.循环每一个模块的件数，然后进行遍历，将每一个模块的件数加起来就是总件数

2.循环每一个模块的总结个，然后进行遍历，将每一个模块的总价格加起来就是最终的总价格

3.把总件数和总价格赋值给下面对应的元素即可

这里要注意获取到的件数和价格都是字符串类型的需要进行数值转换再相加。

最终的代码如下：

<!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">
    <script src="../js/jquery.min.js"></script>
    <title>数量添加</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrapper {
            width: 500px;
            height: 100px;
            /* background-color: pink; */
            margin-top: 20px;
            margin-left: 200px;
        }
        
        .change a {
            float: left;
            text-decoration: none;
            color: #ccc;
            width: 20px;
            height: 25px;
            border: 1px solid #cacbcb;
            text-align: center;
            lin

最低0.47元/天解锁文章

申申あ

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Jquery购物车模块-计算总件数和总额

首先来看布局：布局非常简单，这里就不多说了，直接来看功能实现部分，首先因为每次每个模块点+或者-都会更改下面的总件数和总价，所以直接写一个函数来获取总件数和总价，然后当点击+或者-号的时候就调用这个函数即可。那么这个函数的思路如下：1.循环每一个模块的件数，然后进行遍历，将每一个模块的件数加起来就是总件数2.循环每一个模块的总结个，然后进行遍历，将每一个模块的总价格加起来就是最终的总价格3.把总件数和总价格赋值给下面对应的元素即可这里要注意获取到的件数和价格都是字符串类型的需要进行数值转换再相加。最终
复制链接

扫一扫