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*/
<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*/
相关文章推荐
- web乱码问题解决总结
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)
- a标签# 和javascript:;的区别
- js条件语句false情况
- js实现复制到剪切板,兼容所有浏览器
- JS-表格数据的添加与删除、搜索
- [Javascript] Array methods in depth - some
- js对象或类的方法设计模式解读
- jsp当中JSTL对特殊字符的处理:EL运算符
- js之中使用 this 的原因
- js类型判断
- three.js学习笔记 光和影
- js到处excel
- 九九乘法表_js代码编写
- extjs-常用方法(string、number、date、json、function)
- 160106_javascript与类
- JavaScript_DOM编程艺术第二版学习笔记-第10章
- javaScript表单验证大全
- javascript省市二级联动效果
- JavaScript判断IE各版本完美解决方案