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" /& ...
随机推荐
- python数据处理（五）之数据清洗：研究、匹配与格式化
1 前言 保持数据格式一致以及可读,否则数据不可能正确合并 清洗数据的过程中记下清洗过程的每一步,方便数据回溯以及过程复用 2 数据清洗基础知识 2.1 找出需要清洗的数据 仔细观察文件,观察数据字段 ...
- nginx配置使用, 入门到实践
1. 本文做自己学习配置使用, 转自: https://mp.weixin.qq.com/s?__biz=Mzg2MjEwMjI1Mg%3D%3D&chksm=ce0dae4df97a275b ...
- Spring AOP里的静态代理和动态代理，你真的了解嘛？
什么是代理? 为某一个对象创建一个代理对象,程序不直接用原本的对象,而是由创建的代理对象来控制原对象,通过代理类这中间一层,能有效控制对委托类对象的直接访问,也可以很好地隐藏和保护委托类对象,同时也为 ...
- PJzhang:python基础入门的7个疗程-seven
猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第19天:开源模块 数据 ...
- 写给程序员的机器学习入门 (八) - 卷积神经网络 (CNN) - 图片分类和验证码识别
这一篇将会介绍卷积神经网络 (CNN),CNN 模型非常适合用来进行图片相关的学习,例如图片分类和验证码识别,也可以配合其他模型实现 OCR. 使用 Python 处理图片 在具体介绍 CNN 之前, ...
- jspang 做个那个pos系统--学习笔记
/为什么不能使用Object.assign() //使用Object.assign之后数据会发生改变,但是试图没有跟新 <template> <div class="pos ...
- 面试题十七：打印从1到最大的n位数
输入数字n,按顺序打印到最大的n位数 注意:没有规定类型,无论int或long 都会有可能溢出. 应当选择其他类型如String 方法一:定义长度与位数相同的字符数组,从0开始进行加一操作打印 pub ...
- 深入探究JVM之垃圾回收器
@ 目录 前言 正文 一.垃圾收集算法 标记-复制 标记-清除 标记-整理 分代回收 二.常用的垃圾回收器 Serial/SerialOld ParNew Parallel Scavenge/Para ...
- Letex中表格问题
最近在学习使用Letex,在学习过程中碰到很多小问题,故记之. 以下是一个参数表的实例(绘成三线表的形式). \begin{table}[hp] %%参数: h:放在此处 t:放在顶端 b:放在底端 ...
- 选择排序的实现以及如何编写测试 #CS61B-sp18-3.1
Selection Sort的思想: 就是在一系列数字中先找到一个最小的放在所有数字的第一个位置上,然后再从余下的数字里面找最小个放在余下的数字里的第一个位置上. 例如: 在这段数据里面我们找到最小的 ...