abstrak：$(function () { //默認選中第一個 $('.detail_color_left').eq(0).addClass('checked'); $('.detail_much_left').eq(0).addClass('checked'); updateTotalPrice(); changeClass

$(function () {
//默認選中第一個
$('.detail_color_left').eq(0).addClass('checked');
$('.detail_much_left').eq(0).addClass('checked');
updateTotalPrice();
changeClass('.detail_much_left', 'checked');//改變版本
changeClass('.detail_color_left', 'checked');//改變顏色
changeClass('.shop_detail_bz1', 'checked', '.shop_detail_button');//服務保障
function changeClass(clickClass, addClass, istrue) {
$(clickClass).click(function () {
if (!istrue) {//判斷第三變量
$(clickClass).removeClass(addClass);
$(this).addClass(addClass);
} else {
$(this).find(istrue).toggleClass(addClass);//class有無取反
}
updateTotalPrice();
});
}
//統(tǒng)計總價格
function updateTotalPrice() {
//版本價錢
var version = parseFloat($(".detail_much_left[class$='checked']").find('span').attr('data-val'));
//服務價錢
var serviceNum = $(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');//選中標簽父元素內(nèi)包含的span標簽內(nèi)data-val的值
var svprice = 0;
for (var i = 0; i < serviceNum.length; i++) {
svprice += parseFloat(serviceNum[i].getAttribute('data-val'));
}
//總價值
var totalprice = version + svprice;
$('#phonePrice').html(version + '元');//小字
$('#totalPrice').html('總計&nbsp;：&nbsp;' + totalprice + '元');//大字
}
})

jq重要。而且簡單方便，思想和原生js都差不多。

Guru membetulkan：天蓬老師Masa pembetulan：2019-04-08 10:19:00
Rumusan guru：這個商城,如果我能寫出來, 很多傳統(tǒng)的頁面, 應該都可以應付了