abstrak：1、jQuery代碼// 使用替換class名的方法$(function() { //默認選中第一個版本和第一個顏色 $('.detail_much_left').eq(0).attr('class','detail_much_left checked') $('.detail_
1、jQuery代碼
// 使用替換class名的方法
$(function() {
//默認選中第一個版本和第一個顏色
$('.detail_much_left').eq(0).attr('class','detail_much_left checked')
$('.detail_color_left').eq(0).attr('class','detail_color_left checked')
//點擊選中其他顏色
$('.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()
})
//選中小米提供的保障服務(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){
//如果被選中，就除移選中
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
//服務(wù)價錢
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('總計 ： '+TotalPrice+'元')
$('#phonePrice').html(bbPrice+'元')
}
})
2、運行結(jié)果
Guru membetulkan：韋小寶Masa pembetulan：2019-02-20 09:02:51
Rumusan guru：寫的還是蠻清晰的 很不錯 繼續(xù)加油吧！