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程序设计有所帮助。