html购物车效果,模拟加入购物车效果

html>

模拟加入购物车效果

* {margin: 0px auto;padding: 0px;}

.top {width: 402px;height: 35px;line-height: 35px;text-align:center;margin-top: 50px;

background: #C40000;color:#fff;}

.main {width: 400px;height: 400px;border: 1px solid #C40000;}

p {width: 400px;height: 26px;margin-top:10px;}

b {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;

border: 1px solid #ccc;float: left;margin-left: 5px;}

span {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;

border: 1px solid #ccc;display: block;float: left;margin-left: 5px;}

span:hover {cursor: pointer;}

button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}

button:hover {cursor: pointer;}

.notice{border:0px;}

.notice+input{width:60px;margin-left: 6px;text-align: center;}

.select{border: 2px solid #ff0000;

width: 88px;height: 24px;

color: #ff0000;

line-height: 24px;

}

请选择信息后加入购物车

版本

ONE A2001

ONE A0001

ONE A1001

机身颜色

白色

黑色

金色

套餐类型

标配

套餐一

套餐二

运行内存

2GB

3GB

4GB

机身内存

16GB

32GB

64GB

产地

中国大陆

港澳台

价格

999元抢购

数量

加入购物车

$(function(){

$('span').click(function(){

if($(this).hasClass('select')){

$(this).removeClass('select');

}else{

$(this).addClass('select').siblings('span').removeClass('select');

}

})

$('#sub').click(function(){

var form={};

var flag=true;

$('.item').each(function(){

if($(this).children('span.select').length !=1){

flag=false;

}else{

var key=$(this).attr('name');

var value=$(this).children('span.select').html();

form[key]=value;

}

})

if($('.item1 input').val()<=0){

flag=false;

}else{

form['num']=$('.item1 input').val();

}

if(flag){

alert('加入购物车!');

}

})

})