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;

}

$(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('加入购物车!');

}

})

})