jq ajax购物车,jquery制作的移动端购物车效果完整示例
本文实例讲述了jquery制作的移动端购物车效果。分享给大家供大家参考,具体如下:
html部分
购物详情
全场满100元包邮,还差100元包邮
江南脐橙20个160g以上/个
直降¥50¥75.9
-0+满减满一件,即享受16.9元优惠
江南脐橙20个160g以上/个
直降¥50¥75.9
-0+满减满一件,即享受16.9元优惠
江南脐橙20个160g以上/个
直降¥50¥75.9
-0+满减满一件,即享受16.9元优惠
江南脐橙20个160g以上/个
直降¥50¥75.9
-0+满减满一件,即享受16.9元优惠
江南脐橙20个160g以上/个
直降¥50¥75.9
-0+满减满一件,即享受16.9元优惠
合计: ¥0.00
已经惠¥0.00
去结算(0)
-
首页
-
分类
-
吃饭吧
-
购物车
-
我的
js
文件自行下载 版本11
index.js:
$(function () {
$(".mrnus").click(function () {
shopAdd($(this));
che();
})
$(".add").click(function () {
shopAdd($(this));
che();
})
$(".checks").click(function(){
checked($(this));
che();
})
$("#quan").click(function() {
quan();
})
})
function shopAdd(obj) {
// console.log(obj)
if(obj.html() == "+"){
// alert("jia")
let num = parseInt(obj.prev().html());
num++;
obj.prev().html(num);
// 改变价格
// 判断是否选中
if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() !=""){
let pricr = parseInt(obj.parent().prev().find(".mon").html());
// console.log(pricr);
let money = parseInt($("#money").html());
money += pricr;
// console.log(price)
$("#money").html(money);
}
} else if (obj.html() == "-"){
// alert("j")
let num = parseInt(obj.next().html());
num--;
if(num <= 0){
num = 0;
// return;
}
obj.next().html(num);
// 改变价格
// 判断是否选中
if (obj.parent().parent().parent().parent().parent().parent().parent().find(".checks").html() != "") {
let price2 = parseInt(obj.parent().prev().find(".mon").html());
// console.log(pricr);
let money = parseInt($("#money").html());
money -= price2;
// console.log(price)
$("#money").html(money);
}
}
}
// 选择
function checked(checks) {
// console.log(checks.html())
if (checks.html() == ""){
checks.css({"background":"red"})
checks.html("√");
money(checks);
}else{
checks.css("background","white")
checks.html("");
money(checks,1);
}
}
function money(obj,x){
// alert(obj)
let price = parseInt(obj.parent().parent().find(".mon").html());
let content = parseInt(obj.parent().next().find(".cont").html());
// console.log(content)
if(x != null){
price *= -1 ;
}
let money= parseInt($("#money").html());
money += price * content;
// console.log(price)
$("#money").html(money);
}
function che(){
let ches = $(".checks");
// console.log(ches.size())
}
function quan() {
if($("#quan").attr("index") == 0){
$("#quan").attr("index","1")
$(".checks").css({ "background": "red" })
$(".checks").html("√");
$("#quan").css({ "background": "red" })
$("#quan").html("√");
$(".btn span").html("11")
}else{
$("#quan").attr("index", "0")
$(".checks").css({ "background": "white" })
$(".checks").html("");
$("#quan").css({ "background": "white" })
$("#quan").html("");
$(".btn span").html("0")
}
}
css
@charset "utf-8";
*{
margin:0;
padding:0;
}
html{
font-size:22.67vw;
/* font-family: "黑体"; */
}
html,body{
height: 100%;
background-color: #f4f4f4;
}
body{
height: 100%;
background-color: #f4f4f4;
font-family:"微软雅黑";
display: -webkit-flex;
flex-direction: column;
}
a{
text-decoration:none;
}
ul,ol{
list-style:none;
}
img{
border:0;
display: block;
}
header{
background: #fff9eb;
height: 0.4rem;
font-size: 12px;
padding-left: .1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ffd6a0;
}
header h3{
font-weight: normal;
}
header h3 span{
color: #ff695a;
}
/* main--------------------------*/
.main{
display: flex;
flex:1;
overflow: auto;
margin-top: .1rem;
background: #ffffff;
}
.main_shop{
width: 100%;
flex-direction: column;
}
.shop_list{
width: 100%;
height: 1.3rem;
border-bottom:1px solid #dddddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.checked{
width: 10%;
height: 100%;
}
.checked div{
width: 0.17rem;
height: 0.17rem;
border:1px solid #cdcdcd;
border-radius: 50%;
margin-top: .43rem;
margin-left: .1rem;
font-size: 12px;
color: white;
text-align: center;
line-height: .17rem;
}
.content{
flex: 1;
height: 100%;
}
.content_top{
width:100%;
height: 1rem;
display: flex;
}
.img , img{
width: .75rem;
height: 100%;
}
.text{
flex: 1;
height: 100%;
font-size: 12px;
padding-right:.16rem;
padding-left: .15rem;
}
.tit{
display: flex;
align-items: center;
justify-content: space-between;
height:.38rem;
}
.tit p{
font-size: .15rem;
color:#333333;
}
.tit div{
width:.15rem;
height: .17rem;
background: url("shop/remove.jpg");
background-size: cover;
}
.down{
height: 0.17rem;
width: 0.41rem;
color: #11b57c;
border:2px solid #11b57c;
border-radius: .08rem;
text-align: center;
line-height: .17rem;
margin-top: .11rem;
}
.price{
display: flex;
height: .3rem;
align-items: center;
justify-content: space-between;
font-size: .12rem;
font-weight: 900;
}
.price_left span:first-child{
color: #ff695a;
display:inline-block;
margin-right: 5px;
}
.mon{
color: #ff695a;
display:inline-block;
margin-right: 5px;
}
.price_left span:last-child{
color: #cecece;
}
.price_right{
display: flex;
justify-content: space-around;
align-items: center;
width: .77rem;
height: .22rem;
border:1px solid #dddddd;
border-radius: 5px;
}
.price_right div{
flex:1;
text-align: center;
}
.price_right div:nth-child(2){
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
.content_bottom{
width:100%;
height: .3rem;
border-top: 1px solid #dddddd;
display:flex;
justify-content: flex-start;
align-items: center;
}
.content_bottom p{
font-size: .13rem;
color:#808080;
font-weight: 800;
}
.content_bottom p span{
font-size: .13rem;
color:#cccccc;
padding-left: 10px;
}
/* car */
.car{
height: 0.48rem;
width: 100%;
border-top: 1px solid #d5d5d5;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.car_left{
height: 100%;
display: flex;
align-items: center;
}
.car_left div{
width: 0.17rem;
height: 0.17rem;
border: 1px solid #cdcdcd;
border-radius: 50%;
margin-left: .1rem;
text-align: center;
line-height: .17rem;
margin-right: 10px;
}
.car_right{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.te p:first-child{
font-size: 12px;
font-weight: 900;
}
.te p:first-child span{
color: #ff6353;
}
.btn{
width: 1.1rem;
height:100%;
background:#ff6353;
color:white;
font-size: .17rem;
text-align: center;
line-height: .5rem;
}
.te p:last-child span{
color: #999999;
}
/* footer 999999*/
footer{
height: 0.48rem;
width: 100%;
border-top: 2px solid #d5d5d5;
background: #fff;
}
footer ul{
display: flex;
justify-content: space-around;
align-items: center;
margin-top:6px;
}
footer ul li{
font-size: 12px;
color:#8d8a8a;
}
footer ul li img{
width: 0.25rem;
height: 0.22rem;
}
希望本文所述对大家jQuery程序设计有所帮助。
jq ajax购物车,jquery制作的移动端购物车效果完整示例相关推荐
- jQuery 制作交通信号灯红绿灯动画效果
jQuery 制作交通信号灯红绿灯动画效果 HTML <p>好好学习 天天向上</p><div class="light"><div cl ...
- jq ajax xml,jQuery+ajax读取并解析XML文件的方法
本文实例讲述了jQuery+ajax读取并解析XML文件的方法.分享给大家供大家参考,具体如下: ajax.xml: zhangsan 1 lisi 2 demo.html: /p> " ...
- jq ajax traditional,jQuery ajax - param() 方法
更多实例 我们可以如下显示对象的查询字符串表示以及 URI 编码版本: var myObject = { a: { one: 1, two: 2, three: 3 }, b: [1,2,3] }; ...
- 使用Jquery制作精美的图片展示效果
文章目录 效果展示 准备工作 重点知识须知 attr()与css()的区别 获取当前元素的索引 案例代码 总结 效果展示 准备工作 一只VSCode Jquery源文件 一些JQ基础知识 一些Html ...
- JQuery制作飘落的树叶动画效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
- jQuery使用getJSON方法获取json数据完整示例
本文实例讲述了jQuery使用getJSON方法获取json数据.分享给大家供大家参考,具体如下: demo.js: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- swift perfect mysql_Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)...
本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- jq ajax 读取本地文件,jquery读取本地文件
$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquer ...
最新文章
- 程序员必备网站之一:No Design
- Jquery Ajax时 error处理 之 parsererror
- (原)给定输入,输出全排列
- go mysql 查询数据_MySQL常用语句之查询数据-Go语言中文社区
- VTK:libvtkGUISupportQt-6.3.so.1: cannot open shared object
- 利用Console来调试JS程序、Console用法总结
- 【theano-windows】学习笔记十五——受限玻尔兹曼机
- 【luogu P5022 旅行】 题解
- HDU 5979 2016ICPC大连 I: Convex
- 7.Linux/Unix 系统编程手册(上) -- 内存分配
- Python 符号运算
- python风控建模_风控建模之特征筛选与建模(python)
- 【Qt】用setValue()设置UI控件内的内容,如何避免valuechange()被触发
- 如何将MBR分区转换成GPT分区
- 痛并快乐着的保研经历
- a标签跳转页面自动在最前面携带localhost:8080,怎么解决?
- 柳传志:古稀人生最后一个大弯
- lnk1120如何解决_Linking a C++ DLL 引发LNK1120和LNK2019问题的解决方案
- 【技术推荐】WebLogic 反序列化漏洞深入分析
- 会了它+稳定发挥=3000包吃住
热门文章
- TI TMS570LC43xx 裸机开发快速上手
- D - 迷宫游戏 (最短路径)
- sympy模块解指数方程
- storm流式处理框架
- 【紫书第九章】动态规划(DP)常见模型汇总与DP问题分析方法
- C#语法基础(二)---数组stringArrayList
- 最大连续区间和算法详解+代码
- socket.onmessage没有接收到服务器消息_IM服务器设计-如何解决消息的乱序
- mysql like 全文索引_mysql like%query是慢全文索引
- IIS5.1安装设置-Sql Sever2008安装设置-移动端设置等必读