摘要：$(function () { //默認(rèn)選中第一個(gè) $('.detail_color_left').eq(0).addClass('checked'); $('.detail_much_left').eq(0).addClass('checked'); updateTotalPrice(); changeClass
$(function () {
//默認(rèn)選中第一個(gè)
$('.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');//服務(wù)保障
function changeClass(clickClass, addClass, istrue) {
$(clickClass).click(function () {
if (!istrue) {//判斷第三變量
$(clickClass).removeClass(addClass);
$(this).addClass(addClass);
} else {
$(this).find(istrue).toggleClass(addClass);//class有無(wú)取反
}
updateTotalPrice();
});
}
//統(tǒng)計(jì)總價(jià)格
function updateTotalPrice() {
//版本價(jià)錢
var version = parseFloat($(".detail_much_left[class$='checked']").find('span').attr('data-val'));
//服務(wù)價(jià)錢
var serviceNum = $(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');//選中標(biāo)簽父元素內(nèi)包含的span標(biāo)簽內(nèi)data-val的值
var svprice = 0;
for (var i = 0; i < serviceNum.length; i++) {
svprice += parseFloat(serviceNum[i].getAttribute('data-val'));
}
//總價(jià)值
var totalprice = version + svprice;
$('#phonePrice').html(version + '元');//小字
$('#totalPrice').html('總計(jì) ： ' + totalprice + '元');//大字
}
})
jq重要。而且簡(jiǎn)單方便，思想和原生js都差不多。
批改老師：天蓬老師批改時(shí)間：2019-04-08 10:19:00
老師總結(jié)：這個(gè)商城,如果我能寫出來(lái), 很多傳統(tǒng)的頁(yè)面, 應(yīng)該都可以應(yīng)付了