摘要：$(function(){//    默认选中第一个版本/第一个颜色    $('.detail_color_left').eq(0).attr('class','detail_color_left checked');    $('.detail_much_left').e

$(function(){

//    默认选中第一个版本/第一个颜色

$('.detail_color_left').eq(0).attr('class','detail_color_left checked');

$('.detail_much_left').eq(0).attr('class','detail_much_left checked');

updateTotalPrice()

//点击选中其他的颜色

$('.detail_color_left').click(function(){

$('.detail_color_left').attr('class','detail_color_left');

$(this).attr('class','detail_color_left checked');

updateTotalPrice()

});

//点击选中手机版本

$('.detail_much_left').click(function(){

$('.detail_much_left').attr('class','detail_much_left');

$(this).attr('class','detail_much_left checked');

updateTotalPrice();

})

//点击保障服务

$('.shop_detail_bz1').click(function(){

var nowcircleclass=$(this).find('.fa-check-circle').attr('class');

var nowclass=$(this).find('.fa-check-square').attr('class');

if(nowcircleclass.indexOf('checked')>0){

//如果存在,则移除选中;

nowcircleclass=nowcircleclass.replace('checked','');

nowclass=nowclass.replace('checked','');

$(this).find('.fa-check-circle').attr('class',nowcircleclass);

$(this).find('.fa-check-square').attr('class',nowclass);

}else{

//不存在, 则选中

$(this).find('.fa-check-circle').attr('class',nowcircleclass+' checked');

$(this).find('.fa-check-square').attr('class',nowclass+' checked');

}

updateTotalPrice();

})

//统计总价格

function updateTotalPrice(){

//版本价钱

var bbprice=$(".detail_much_left[class$='checked']").find('span').attr('data-val')*1;

//服务价钱

var svprice=0;

var svspan=$(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');

for(var i=0;i

svprice+=svspan[i].getAttribute('data-val')*1;

}

//总价值

var totalprice=bbprice+svprice;

$('#totalPrice').html('总计 ： '+totalprice+'元')

$('#phonePrice').html(bbprice+'元');

}

})

批改老师：天蓬老师批改时间：2019-06-24 10:27:33

老师总结：这个作业 , 做得不错, 如果使用了jQuery, 建议就尽可能的用它, 除非他没有提供的方法, 再去用原生js来解决, 你这里还用了getAttribute()就不好了, 应该用attr()或者 prop()代替