abstrakt：// 使用替換class名的方法$(function(){// 默認(rèn)選中第一個(gè)版本和第一個(gè)顏色$('.detail_much_left').eq(0).attr('class','detail_much_left checked')$('.detail_color_left').eq(0).attr('class',&

// 使用替換class名的方法

$(function(){

// 默認(rèn)選中第一個(gè)版本和第一個(gè)顏色

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

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

// 點(diǎn)擊選中其他版本

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

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

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

updateTotalPrice()

})

// 點(diǎn)擊選中其他顏色

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

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

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

updateTotalPrice()

})

// 選中小米提供的保障服務(wù)

$('.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){

// 如果已經(jīng)被選中，就處移選中

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()

})

// 計(jì)算總價(jià)

function updateTotalPrice(){

//版本價(jià)錢

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

//服務(wù)價(jià)錢

var svPrice=0

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

for( var i=0; i<svSpan.length;i++){

svPrice+=svSpan[i].getAttribute('data-val')*1

}

var TotalPrice=bbPrice+svPrice

$('#totalPrice').html('總計(jì)&nbsp;：&nbsp;'+TotalPrice+'元')

$('#phonePrice').html(bbPrice+'元')

}

})

總結(jié)：

1. 在同相同的類的容器中通過eq（0）在類里面添加checked類的樣式實(shí)現(xiàn)默認(rèn)選中效果

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

2. 在相同的類名的容器中點(diǎn)擊的時(shí)候判斷，如果選中就添加移出其他容器的樣式為空，如果沒有選中就在當(dāng)前的樣式添加checked樣式
   

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

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

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

   })

3. 計(jì)算總價(jià)還在消化中
   

   
   

Korrigierender Lehrer：韋小寶Korrekturzeit：2019-03-14 15:21:58
Zusammenfassung des Lehrers：寫的很完整 下面總結(jié)的也沒毛病 使用jQuery來寫項(xiàng)目還是比較簡(jiǎn)單的吧