小米商品详情页面jq

$(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();
});
}
//统计总价格
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]');//选中标签父元素内包含的span标签内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都差不多。