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" /& ...
随机推荐
- web 部署专题(八)：Nginx 反向代理中cookie相关问题
问题3:认证问题 Domino服务器中,通过写了一些接口代码,提供RESTful的服务,来对手机端进行提供服务.但是由于原来的环境,没有SSO,而且不通过认证,没法访问到Domino里面的接口代码. ...
- 李航统计学习方法(第二版)（六）：k 近邻算法实现（kd树(kd tree)方法）
1. kd树简介 构造kd树的方法如下:构造根结点,使根结点对应于k维空间中包含所有实例点的超矩形区域;通过下面的递归方法,不断地对k维空间进行切分,生成子结点.在超矩形区域(结点)上选择一个坐标轴和 ...
- 数据可视化之PowerQuery篇（十四）产品关联度分析
https://zhuanlan.zhihu.com/p/64510355 逛超市的时候,面对货架上琳琅满目的商品,你会觉得这些商品的摆放,或者不同品类的货架分布是随机排列的吗,当然不是. 应该都听说 ...
- MySQL主从复制--单库复制搭建
背景说明 负责公司MySQL数仓的搭建和维护,因为前端业务涉及到一次业务表的分库,导致整个平台新增加一台MySQL服务器,需要将该库数据通过主从复制同步至原有的数仓实例. 数据流向说明如下图: 业务环 ...
- python发送邮件插件
github链接:https://github.com/573734817pc/SendEmailPlug-in.git 说明: 1.该插件功能为发送邮件. 2.基于python编写. 3.使用的时候 ...
- .Net Core微服务入门全纪录（完结）——Ocelot与Swagger
Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 前言 上一篇[.Net Core微服务入门全纪录(八)--Docker Compose与容器网络]完成了docker-compose.y ...
- 深入浅出ReentrantReadWriteLock源码解析
读写锁实现逻辑相对比较复杂,但是却是一个经常使用到的功能,希望将我对ReentrantReadWriteLock的源码的理解记录下来,可以对大家有帮助 前提条件 在理解ReentrantReadWri ...
- Arctic Code Vault Contributor 上榜了 go-admin v1.1 beta 版本发布
Arctic Code Vault Contributor 上榜了,内心比较喜悦,谢谢开源社区的支持,也谢谢广大 coder 的支持: go-admin 是一个基于 Gin + Vue + Eleme ...
- No implementation found for void `org.webrtc.PeerConnectionFactory.initializeAndroidGlobals(android.content.Context, boolean)
背景介绍 最近在使用 AndroidRTC 利用WebRtc屏幕共享时使用PeerConnectionFactory.initializeAndroidGlobals(context, true, t ...
- 关于页面布局中，如何让一个div水平和垂直居中的五个方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...