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 CSS3 实现3D旋转木马
3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...
- java学习第七天2020/7/12
一. java继承使用的关键字是 extend class 子类 extends 父类{} 举一个类的例子: public class person { public String name; pu ...
- Kafka 是如何管理消费位点的？
Kafka 是一个高度可扩展的分布式消息系统,在实时事件流和流式处理为中心的架构越来越风靡的今天,它扮演了这个架构中核心存储的角色.从某种角度说,Kafka 可以看成实时版的 Hadoop 系统.Ha ...
- void operator()()的功能
在学习多线程的时候看到这样的一段代码,为什么要重载()呢?真有这个必要吗? #include <iostream> #include <thread> class Counte ...
- three.js 数学方法之Box3
从今天开始郭先生就会说一下three.js 的一些数学方法了,像Box3.Plane.Vector3.Matrix3.Matrix4当然还有欧拉角和四元数.今天说一说three.js的Box3方法(B ...
- 【JUnit测试】总结
什么是Junit? Junit是xUnit的一个子集,在c++,paython,java语言中测试框架的名字都不相同 xUnit是一套基于测试驱动开发的测试框架 其中的断言机制:将程序预期的结果与程序 ...
- SW算法求全局最小割(Stoer-Wagner算法）
我找到的唯一能看懂的题解:[ZZ]最小割集Stoer-Wagner算法 似乎是一个冷门算法,连oi-wiki上都没有,不过洛谷上竟然有它的模板题,并且2017百度之星的资格赛还考到了.于是来学习一下. ...
- apache 添加多个站点
虚拟主机 (Virtual Host) 是在同一台机器搭建属于不同域名或者基于不同 IP 的多个网站服务的技术.可以为运行在同一物理机器上的各个网站指配不同的 IP 和端口,也可让多个网站拥有不同的域 ...
- Python 3.x 安装PyQt5
一. 安装PyQt5 官方要求Python版本:Python >=3.5 打开命令行 输入 pip install PyQt5 PyQt5安装成功 安装完成功PyQt5后发现没有design ...
- std:ios:sync_with_stdio (false)以及局限性
如何在输入输出上提高一下效率emmmm #include<iostream> #include<stdio.h> #include<stdlib.h> #inclu ...