您的位置:首页 > Web前端 > JavaScript

js--购物车加减效果

2016-01-06 15:45 721 查看
<div class="quantity-btn" class="right">

<input class="minus" type="button" value="-">

<input class="quantity-display" class="chc_height" type="text" readonly value="1">

<input class="plus" type="button" value="+">

</div>

//加减效果

$(".plus").click(function(){

var x =$(this).siblings(".quantity-display").val();

x++;

$(this).siblings(".quantity-display").val(x);

//alert(x);





})

$(".minus").click(function(){

var y = $(this).siblings(".quantity-display").val();

y--;

if(y < 0){

y = 0;

}

$(this).siblings(".quantity-display").val(y);

})

$(".quantity-display").blur(function(){

var z = $(this).val();

if(z < 0){

z = 0;

}

$(this).val(z);

})

/*加减效果 begin*/

.quantity-btn{

float:right;

margin-top: 8px;

}

/*#quantity-btn input{

float:left;

height:24px;

width:24px;

}*/

.quantity-btn .minus{

font-size:15px;

font-weight:bold;

color:#b3b3b3;

background: #fff;

float:left;

height:24px;

width:24px;

border:solid 1px #b3b3b3;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

.quantity-btn .plus{

font-size:15px;

font-weight:bold;

color:#b3b3b3;

background: #fff;

float:left;

height:24px;

width:24px;

border-left: 0;

border:solid 1px #b3b3b3;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

.quantity-btn .quantity-display{

float:left;

height:24px;

width:24px;

text-align:center;

font-weight:bold;

color:#fff;

background: #32c5e3;

}

/*加减效果 over*/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: