1. 程式人生 > >靜態頁面購物車數量加減功能實現

靜態頁面購物車數量加減功能實現

購物車 next() span 獲取 hicon minus this number 標簽

1.進行“加”的效果時:一定要註意:獲取單價和數量是禁止使用id或者class選擇器,要使用add的選擇器去尋找單價和數量的值

HTML:

<div class="col-xs-7">
<p>什錦小郡肝套餐</p>
<p style="height: 90px"></p>
<p style="color: red;font-size: 45px;">
<span>¥</span>
<span class="price">16</span>
<span class="glyphicon glyphicon-plus add"></span>
<i>0</i>
<span class="glyphicon glyphicon-minus minud"></span>
</p>
</div>

JS:

// 加號的效果
$(‘.add‘).click(function(){

// 1.先獲取份數
var n = $(this).next().text();
// 2.將獲取的份數轉化為數字格式
var num = parseInt(n) + 1;
if(num == 0){return; }
// 3.將減號和份數元素顯示
$(this).next().show();
$(this).next().next().show();
// 4.將份數賦值給i標簽
$(this).next().text(num);
// 5.獲取單價
var price = $(this).prev().text();
// 6.獲取當前所選總價
var a = $(".totalpriceshow").html();
// 7.計算當前所選總價 toFixed(num):js表示將Number四舍五入為指定的小數位數的數字
$(".totalpriceshow").html((a * 1 + price * 1).toFixed(2));
});

// 減號的效果
$(‘.minud‘).click(function(){

// 1.獲取份數
var n = $(this).prev().text();
// 2.將份數轉化為數字格式
var num = parseInt(n) - 1;
if(num < 0){

$(this).prev().text()-1;
}
// 4.將份數賦值給i標簽
$(this).prev().text(num);
// 5.獲取單價
var price = parseInt($(‘.price‘).text());
var price = $(this).prev().prev().prev().text();
// 6. 獲得當前的總價
var totalPrice =parseInt($(".totalpriceshow").html());

// 7.將總價賦值給尾部的總價元素標簽
$(".totalpriceshow").html((totalPrice - price).toFixed(2));
// 8.將減號和份數元素顯示
if(num == 0){

$(this).prev().hide();
$(this).hide();
return;
}
});

靜態頁面購物車數量加減功能實現