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的补充和重构
DAO重构后的代码 package com.litian.jdbc; import org.apache.commons.beanutils.BeanUtils; import java.sql.*; ...
- Python之函数、递归、内置函数
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...
- pytest框架的安装与使用
pytest框架的安装与使用 一,pytest了解 pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高. ...
- bzoj4300绝世好题
bzoj4300绝世好题 题意: 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0.n≤100000,ai≤10^9. 题解: 用f[i]表示当前二进制i为1 ...
- proxy是什么
普通的因特网访问是一个典型的客户机与服务器结构:用户利用计算机上的客户端程序,如浏览器发出请求,远端WWW服务器程序响应请求并提供相应的数据.而Proxy处于客户机与服务器之间,对于服务器来说,Pro ...
- try-catch- finally块中， finally块唯一不执行的情况是什么？
除非在try块或者catch块中调用了退出虚拟机的方法(即System.exit(1);),否则不管在try块.catch块中执行怎样的代码,出现怎样的情况,异常处理的finally块总是会被执行的 ...
- 机房vscode使用方法
问题 众所周知,机房中的电脑有一个win7系统,(非常的好,摆脱linux了),同时win7上有一个 vscode ,更好了. 但是!vscode 由于老师不允许联网,导致插件无法安装,更为恶心的事, ...
- Atlassian Confluence 5.1.2 破解版部署
Atlassian Confluence(简称Confluence)是一个专业的wiki程序.它是一个知识管理的工具,通过它可以实现团队成员之间的协作和知识共享.Confluence 不是一个开源软件 ...
- p44_IP数据包格式
一.IP数据报格式 二.IP分片 数据链路层每帧可封装数据有上限,IP数据超过的要分片. 标识:同一数据报的分片使用同一标识 标志: 片偏移(13bit):用于还原数据报顺序,指出某片在原分组1中的相 ...
- C++11 STL Regex正则表达式与字符串字段解析
简单的日期正则表达式 一个简单的日期解析程序,从yyyy-mm-dd格式的日期字符串中,分别获取年月日. 先设置一个简单的正则表达式,4位数字的"年",1-2位数字的"月 ...