用原生JavaScript和jQuery实现购物车页面基本功能

最新推荐文章于 2024-07-26 11:41:15 发布

努力学习的码农丫

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量693

点赞数 2

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_52264068/article/details/128066603

版权

这篇博客详细介绍了如何使用原生JavaScript和jQuery来实现购物车页面的基本功能，包括购物车的全选操作。首先展示了预期的实现效果，接着分别讲解了原生JavaScript和jQuery的实现方法，提供相关的HTML和CSS样式代码。

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

实现效果

实现功能如下：

1.购物车案例模块-全选

里面 3 个小的复选框按钮选中状态跟着全选按钮走。

2.购物车案例模块-增减商品数量

点击 + 号，就让数量值增加，然后赋值给文本框；点击- 号，就让数量值减少，然后赋值给文本框。

3.购物车案例模块-修改商品小计

每次点击 + 号或者 - 号，修改商品的小计

4.购物车案例模块-计算总计和总额

只有选中框选中时，才参与总计计数和总价

5.购物车案例模块-删除商品模块

点击商品后面的删除按钮和删除选中的商品和清理购物车，都要进行相应功能删除

6.购物车案例模块-选中商品添加背景

选中的商品添加背景，不选中移除背景

html文档：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
</head>

<body>


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <b>我的购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="&