jQuery 购物车案例
h1 {
text-align: center;
}
.cart {
width: 1200px;
height: 600px;
margin: 0 auto;
border: 1px solid #efefef;
}
.cart>ul {
width: 100%;
height: 100%;
list-style: none;
padding:;
margin:;
}
.cart>ul>li {
width: 100%;
height: 100px;
border-bottom: 1px solid #efefef;
line-height: 100px;
}
.itxt {
width: 38px;
height: 38px;
line-height: 38px;
}
.pagination input {
width: 38px;
border: 1px solid #dee2e6;
height: 38px;
}
.col-sm {
text-align: center;
}
css
$(function () {
// 全选按钮
$(".checkAll").change(function () {
$(".j_checkbox, .checkAll").prop("checked", $(this).prop("checked"));
})
$(".j_checkbox").change(function () {
if ($(".j_checkbox:checked").length == $(".j_checkbox").length) {
$(".checkAll").prop("checked", true)
} else {
$(".checkAll").prop("checked", false)
}
})
// 点击加号时
$(".increment").click(function () {
var n = $(this).siblings(".itxt").val();
n++;
var n = $(this).siblings(".itxt").val(n);
var m = $(this).siblings(".itxt").val();
// 当前商品价格
var p = $(this).parents(".col-sm").siblings(".p-money").children(".son-maney").text();
p = Number(p.substr(1))
var price = (p * m).toFixed(2)
// 小计模块
$(this).parents(".col-sm").siblings(".p-sum").children(".son-maney").text(price)
getSum()
})
// 点击减号时
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
var n = $(this).siblings(".itxt").val(n);
var m = $(this).siblings(".itxt").val();
// 当前商品价格
var p = $(this).parents(".col-sm").siblings(".p-money").children(".son-maney").text();
p = Number(p.substr(1))
var price = (p * m).toFixed(2)
// 小计模块
$(this).parents(".col-sm").siblings(".p-sum").children(".son-maney").text(price)
getSum()
})
// 用户在输入框输入数量时候修改小计
$(".itxt").change(function () {
var n = $(this).val();
var p = $(this).parents(".col-sm").siblings(".p-money").children(".son-maney").text();
p = Number(p.substr(1))
var price = (p * n).toFixed(2)
$(this).parents(".col-sm").siblings(".p-sum").children(".son-maney").text(price)
getSum()
})
// 总计
function getSum() {
var count = 0; //总件数
var money = 0 //总价
$(".itxt").each(function (i, ele) {
count += parseInt($(ele).val())
})
$(".amout-sum em").text(count)
$(".p-sum .son-maney").each(function (i, ele) {
money += Number($(ele).text());
})
$(".price-sum em").text("￥"+money.toFixed(2))
}
})
js
<h1>购物车</h1>
<!-- 购物车全选案例 -->
<div class="cart">
<ul>
<li>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-sm">
操作
</div>
<div class="col-sm">
商品图片
</div>
<div class="col-sm">
商品介绍
</div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
单价
</div>
<div class="col-sm">
数量
</div>
<div class="col-sm">
小计
</div>
</div>
</div>
<div class="col-sm">
操作
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-sm">
<input type="checkbox" class="j_checkbox">
</div>
<div class="col-sm"> </div>
<div class="col-sm"> </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm p-money">
<span class="son-maney">￥22.6</span>
</div>
<div class="col-sm align-self-center">
<div class="pagination">
<a class="page-link decrement" href="#">-</a>
<input type="text" value="1" class="itxt">
<a class="page-link increment" href="#">+</a>
</div>
</div>
<div class="col-sm p-sum">
<span>￥</span> <span class="son-maney">22.6</span>
</div>
</div>
</div>
<div class="col-sm">
<a href="#">删除</a>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-sm">
<input type="checkbox" class="j_checkbox">
</div>
<div class="col-sm"> </div>
<div class="col-sm"> </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm p-money">
<span class="son-maney">￥12.6</span>
</div>
<div class="col-sm align-self-center">
<div class="pagination">
<a class="page-link decrement" href="#">-</a>
<input type="text" value="1" class="itxt">
<a class="page-link increment" href="#">+</a>
</div>
</div>
<div class="col-sm p-sum">
<span>￥</span> <span class="son-maney">12.6</span>
</div>
</div>
</div>
<div class="col-sm">
<a href="#">删除</a>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row align-self-center">
<div class="col-sm">
<div class="row">
<div class="col-sm">
<input type="checkbox" class="j_checkbox">
</div>
<div class="col-sm"> </div>
<div class="col-sm"> </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm p-money">
<span class="son-maney">￥23.6</span>
</div>
<div class="col-sm align-self-center">
<div class="pagination">
<a class="page-link decrement" href="#">-</a>
<input type="text" value="1" class="itxt">
<a class="page-link increment" href="#">+</a>
</div>
</div>
<div class="col-sm p-sum">
<span>￥</span> <span class="son-maney">23.6</span>
</div>
</div>
</div>
<div class="col-sm">
<a href="#">删除</a>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<div class="col-sm">
<input type="checkbox" class="j_checkbox">
</div>
<div class="col-sm"> </div>
<div class="col-sm"> </div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm p-money">
<span class="son-maney">￥32.6</span>
</div>
<div class="col-sm align-self-center">
<div class="pagination">
<a class="page-link decrement" href="#">-</a>
<input type="text" value="1" class="itxt">
<a class="page-link increment" href="#">+</a>
</div>
</div>
<div class="col-sm p-sum">
<span>￥</span> <span class="son-maney">32.6</span>
</div>
</div>
</div>
<div class="col-sm">
<a href="#">删除</a>
</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row ">
<div class="col-sm">
<div class="row">
<div class="col-sm">
全选<input type="checkbox" class="checkAll">
</div>
<div class="col-sm">
</div>
<div class="col-sm">
</div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm amout-sum">
总计<em></em>件商品
</div>
<div class="col-sm price-sum">
总价<span>￥</span> <em></em>
</div>
</div>
</div>
<div class="col-sm">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary">去结算</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
html
jQuery 购物车案例的更多相关文章
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
- easyUI拖动购物车案例
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...
- Vue(五) 购物车案例
这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- JQuery购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery 分页案例
Jquery 分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
随机推荐
- MYSQL 之 JDBC（七）：增删改查（五） DAO设计模式
Data Access Object,数据访问对象 what:访问数据信息的类.包含了对数据的CRUD(create.read.update.delete,增删改查)操作,而不包含任何业务相关的信息. ...
- flask 源码专题（十）：flash源码研究
flash源码 def flash(message, category="message"): flashes = session.get("_flashes" ...
- 数据可视化之分析篇（五）如何使用Power BI计算新客户数量？
https://zhuanlan.zhihu.com/p/65119988 每个企业的经营活动都是围绕着客户而开展的,在服务好老客户的同时,不断开拓新客户是每个企业的经营目标之一. 开拓新客户必然要付 ...
- redis（四)：Redis 键(key)
Redis 键命令用于管理 redis 的键. 语法 Redis 键命令的基本语法如下: redis 127.0.0.1:6379> COMMAND KEY_NAME 实例 redis 127. ...
- Kubernetes实战指南（三十一）：零宕机无缝迁移Spring Cloud至k8s
1. 项目迁移背景 1.1 为什么要在"太岁"上动土? 目前公司的测试环境.UAT环境.生产环境均已经使用k8s进行维护管理,大部分项目均已完成容器化,并且已经在线上平稳运行许久. ...
- 小白从零开始阿里云部署react项目+node服务接口（三：部署到服务器）
服务器 准备工具 依次安装即可 nginx 安装nginx https://www.runoob.com/linux/nginx-install-setup.html 配置全局nginx命令 http ...
- koa中是如何封装获取客户端IP的？
案例 var koa = require('koa') var app = new koa() app.use(function (ctx,next) { ctx.body = ctx.ip }) a ...
- P4158 [SCOI2009]粉刷匠（洛谷）
今天A了个紫(我膨胀了),他看起来像个贪心一样,老师说我写的是dp(dp理解不深的缘故QWQ) 直接放题目描述(我旁边有个家伙让我放链接,我还是说明出处吧(万一出处没有了)我讲的大多数题目都是出自洛谷 ...
- MemoryCacheHelper与RedisCacheHelper缓存集成与测试笔记
因为每次在新项目中需要花费大量时间在基础类库搬移.调试.为了节省时间(偷懒)就将MemoryCacheHelper/RedisHelper进行了封装 本次是关于缓存方面记录,源码请参考(包含Redis ...
- 学会这个，助你升值加薪自动化框架之python+selenium+pytest
1.概述 selenium: 基于JavaScript代码库的自动化测试框架,通过脚本语言,模拟用户行为操作,最接近用户真实场景,实现对web自动测试. Selenium,是目前的最火爆企业最主流的w ...