jq實現加減功能
效果展示：
HTML：
<!– 3、諮詢分鐘 –>
<div class=”buymain_body_son”>
<div class=”buymain_body_son_left”>諮詢分鐘</div>
<div class=”buymain_body_son_right”>
<div id=”cuttime” class=”buymain_body_btn”>-</div>
<div id=”mtime” class=”buymain_body_num”>50</div>
<div id=”addtime” class=”buymain_body_btn”>+</div>
</div>
</div>
<!– 4、諮詢次數 –>
<div class=”buymain_body_son”>
<div class=”buymain_body_son_left”>諮詢次數</div>
<div class=”buymain_body_son_right”>
<div id=”cutnum” class=”buymain_body_btn”>-</div>
<div id=”mnum” class=”buymain_body_num”>1</div>
<div id=”addnum” class=”buymain_body_btn”>+</div>
</div>
</div>
CSS：
.buymain_body_son {
display: flex;
flex-direction: row;
margin-top: 4vw;
}
.buymain_body_son_left {
display: flex;
font-size: 14px;
letter-spacing: 1px;
text-shadow: 0 0 0 #777;
align-items: center;
}
.buymain_body_son_right {
display: flex;
flex-direction: row;
flex: 1;
justify-content: flex-end;
align-items: center;
}
.buymain_body_btn {
font-size: 14px;
background-color: #f5f5f5;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1vw;
padding: 0 2vw;
border-radius: 4px;
}
.buymain_body_num {
font-size: 14px;
background-color: #f5f5f5;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1vw;
padding: 0vw 2vw;
border-radius: 4px;
}
JS：
// 諮詢分鐘的加減，假設最少20分鐘，最高60分鐘
var buytime = 50; // 初始值
$(“#mtime”).html(buytime);
$(“#thisnewtime”).html(buytime);
$(“#addtime”).click(function(){
if (buytime==60) return; // 等於60的時候不能加
buytime ++;
$(“#mtime”).html(buytime);
$(“#thisnewtime”).html(buytime);
$(“#cuttime”).css(“color”,”#000″);
if(buytime==60){ // 等於60的時候加號變淺
$(“#addtime”).css(“color”,”#999″);
}
})
$(“#cuttime”).click(function(){
if (buytime==20) return; // 等於20的時候不能減
buytime –;
$(“#mtime”).html(buytime);
$(“#thisnewtime”).html(buytime);
$(“#addtime”).css(“color”,”#000″);
if(buytime==20){ // 等於20的時候減號變淺
$(“#cuttime”).css(“color”,”#999″);
}
})
// 價格變化
var price1 = 300; // 初始單價
var price2 = ‘小計 ￥’+price1;
var price3 = ‘總計￥’+price1;
$(“#priceno1”).html(price1);
$(“#priceno2”).html(price2);
$(“#priceno3”).html(price3);
// 諮詢次數的加減，假設最少1，最多不限制(假設99)
var buynum = 1; // 初始值
$(“#cutnum”).css(“color”,”#999″);
$(“#mnum”).html(buynum);
$(“#thisnewnum”).html(buynum);
$(“#addnum”).click(function(){
if (buynum==99) return; // 等於99的時候不能加
buynum ++;
var newprice1 = price1*buynum; // 刷新價格
var newprice2 = ‘小計 ￥’+newprice1; // 刷新價格
var newprice3 =’總計￥’+newprice1; // 刷新價格
$(“#mnum”).html(buynum);
$(“#thisnewnum”).html(buynum);
$(“#priceno1”).html(newprice1);
$(“#priceno2”).html(newprice2);
$(“#priceno3”).html(newprice3);
$(“#cutnum”).css(“color”,”#000″);
if(buynum==99){ // 等於99的時候加號變淺
$(“#addnum”).css(“color”,”#999″);
}
})
$(“#cutnum”).click(function(){
if (buynum==1) return; // 等於1的時候不能減
buynum –;
var newprice1 = price1*buynum; // 刷新價格
var newprice2 = ‘小計 ￥’+newprice1; // 刷新價格
var newprice3 =’總計￥’+newprice1; // 刷新價格
$(“#mnum”).html(buynum);
$(“#thisnewnum”).html(buynum);
$(“#priceno1”).html(newprice1);
$(“#priceno2”).html(newprice2);
$(“#priceno3”).html(newprice3);
$(“#addnum”).css(“color”,”#000″);
if(buynum==1){ // 等於1的時候減號變淺
$(“#cutnum”).css(“color”,”#999″);
}
})
最後效果大概就是這樣：
