小米商城详情页
老师，最近家里除了一些事情，导致没有时间来听课，初级的课程仅剩下不到10天，我实在是没有时间来学习，麻烦老师帮忙审核作业通过以下好吗？我想把初级的课程，包括里面的选修课缓存下来，忙过这段时间后，我再仔细听讲。谢谢老师了！！
------------
我的这个作业点击变色实现了，就是累加价格没有实现，希望老师能帮忙告知哪里的问题，谢谢！
我是按照现在小米官网做的。
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详情页</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/details.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript">
$(function(){
//默认选中第一个版本和第一个颜色
$('.g6').eq(0).attr('class','g6 checked')
$('.g7').eq(0).attr('class','g7 checked')
//点击选中其他版本
$('.g6').click(function(){
$('.g6').attr('class','g6')
$(this).attr('class','g6 checked')
totalPriceNew()
})
//点击选中其他颜色
$('.g7').click(function(){
$('.g7').attr('class','g7')
$(this).attr('class','g7 checked')
totalPriceNew()
})
// 选择小米保障服务
$('.bzfw-t').click(function(){
// 获取包含yuan的class名，赋值给yuan11
var yuan11=$(this).find('.fa-check-circle').attr('class')
// 获取包含fang的class名，赋值给fang11
var fang11=$(this).find('.fa-check-square').attr('class')
// 如果yuan11里包含checked关键字
if(yuan11.indexOf('checked')>0){
//如果被选中，就移除选中
yuan11=yuan11.replace('checked','')
fang11=fang11.replace('checked','')
$(this).find('.fa-check-circle').attr('class',yuan11)
$(this).find('.fa-check-square').attr('class',fang11)
$('.bzfw-t .bao1').css('color','')
$(this).css('border','1px solid #E0E0E0')
}else{
//如果没有被选中，则选中
$(this).find('.fa-check-circle').attr('class',yuan11+'checked')
$(this).find('.fa-check-square').attr('class',fang11+'checked')
$('.bzfw-t .bao1').css('color','#ff6700')
$(this).css('border','1px solid #ff6700')
// 清除下面框的选中状态
$('.bzfw-b .bao1').css('color','')
$('.bzfw-b').css('border','1px solid #E0E0E0')
$('.bzfw-b').find('[class*=yuan]').attr('class','fa fa-check-circle yuan2')
$('.bzfw-b').find('[class*=fang]').attr('class','fa fa-check-square fang2')
}
totalPriceNew()
})
$('.bzfw-b').click(function(){
// 获取包含yuan的class名，赋值给yuan11
var yuan22=$(this).find('[class*=yuan]').attr('class')
// 获取包含fang的class名，赋值给fang11
var fang22=$(this).find('[class*=fang]').attr('class')
// 如果yuan11里包含check关键字
if(yuan22.indexOf('checked')>0){
//如果被选中，就移除选中
yuan22=yuan22.replace('checked','')
fang22=fang22.replace('checked','')
$(this).find('.fa-check-circle').attr('class',yuan22)
$(this).find('.fa-check-square').attr('class',fang22)
$('.bzfw-b .bao1').css('color','')
$(this).css('border','1px solid #E0E0E0')
}else{
//如果没有被选中，则选中
$(this).find('.fa-check-circle').attr('class',yuan22+'checked')
$(this).find('.fa-check-square').attr('class',fang22+'checked')
$('.bzfw-b .bao1').css('color','#ff6700')
$(this).css('border','1px solid #ff6700')
// 清除上面框的选中状态
$('.bzfw-t .bao1').css('color','')
$('.bzfw-t').css('border','1px solid #E0E0E0')
$('.bzfw-t').find('[class*=yuan]').attr('class','fa fa-check-circle yuan1')
$('.bzfw-t').find('[class*=fang]').attr('class','fa fa-check-square fang1')
}
totalPriceNew()
})
$('.bzfw-bb').click(function(){
// 获取包含yuan的class名，赋值给yuan11
var yuan33=$(this).find('[class*=yuan]').attr('class')
// 获取包含fang的class名，赋值给fang11
var fang33=$(this).find('[class*=fang]').attr('class')
// 如果yuan33里包含check关键字
if(yuan33.indexOf('checked')>0){
//如果被选中，就移除选中
yuan33=yuan33.replace('checked','')
fang33=fang33.replace('checked','')
$(this).find('.fa-check-circle').attr('class',yuan33)
$(this).find('.fa-check-square').attr('class',fang33)
$('.bzfw-bb .bao1').css('color','')
$(this).css('border','1px solid #E0E0E0')
}else{
//如果没有被选中，则选中
$(this).find('.fa-check-circle').attr('class',yuan33+'checked')
$(this).find('.fa-check-square').attr('class',fang33+'checked')
$('.bzfw-bb .bao1').css('color','#ff6700')
$(this).css('border','1px solid #ff6700')
}
totalPriceNew()
})
// 计算总价
function totalPriceNew(){
//版本价钱
var bbPrice=$(".g6[class*='checked']").find('span').attr('data-val')*1
//服务价钱
var svPrice=0
var svSpan=$(".fa-check-square[class*='checked']").parent('.bao3').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+'元')
}
$('#rr').mouseover(function(){
$(this).css({'background':'#fff','color':'#ff6700'})//购物车框鼠标移上背景变白色，自体颜色变桔红
})
$('#rr').mouseleave(function(){
$(this).css({'background':'#424242','color':'#ccc'})//购物车框鼠标移出背景变原来灰色，文字变原灰色
})
$('.down').hide()//下载app的下拉框默认隐藏
$('#ll').mouseover(function(){
$('.down').show()//鼠标移上下载app按钮，下拉框显示
})
$('#ll').mouseleave(function(){
$('.down').hide()//鼠标移开下载app按钮，下拉框隐藏
})
$('#rr').mouseover(function(){
$('this').css('background','#fff')//鼠标移上购物车按钮，背景变白色
})
$('#rr').mouseleave(function(){
$('this').css('background','#424242')//鼠标移开购物车按钮，背景变原来灰色
})
$('.gwc').hide()//购物车下拉框默认隐藏
$('#rr').mouseover(function(){
$('.gwc').slideDown(350)//鼠标移上购物车按钮，下拉框动态打开
})
$('#rr').mouseleave(function(){
$('.gwc').slideUp(350)//鼠标移开购物车按钮，下拉框动态折叠
})
// 关于鼠标移上变色，有的用jquery做的，有的用css做的
$('.uu01-back').hide()
$('#uu01').mouseover(function(){
$('.uu01-back').show()
})
$('#uu01').mouseleave(function(){
$('.uu01-back').hide()
})
$('.uu02-back').hide()
$('#uu02').mouseover(function(){
$('.uu02-back').show()
})
$('#uu02').mouseleave(function(){
$('.uu02-back').hide()
})
$('.uu03-back').hide()
$('#uu03').mouseover(function(){
$('.uu03-back').show()
})
$('#uu03').mouseleave(function(){
$('.uu03-back').hide()
})
$('.uu04-back').hide()
$('#uu04').mouseover(function(){
$('.uu04-back').show()
})
$('#uu04').mouseleave(function(){
$('.uu04-back').hide()
})
$('.uu05-back').hide()
$('#uu05').mouseover(function(){
$('.uu05-back').show()
})
$('#uu05').mouseleave(function(){
$('.uu05-back').hide()
})
$('.uu06-back').hide()
$('#uu06').mouseover(function(){
$('.uu06-back').show()
})
$('#uu06').mouseleave(function(){
$('.uu06-back').hide()
})
$('.uu07-back').hide()
$('#uu07').mouseover(function(){
$('.uu07-back').show()
})
$('#uu07').mouseleave(function(){
$('.uu07-back').hide()
})
$('.uu08-back').hide()
$('#uu08').mouseover(function(){
$('.uu08-back').show()
})
$('#uu08').mouseleave(function(){
$('.uu08-back').hide()
})
$('.uu00-back').hide()
// $('.con07-t-1k .tan').hide()
// $('.con07-t-1k').mouseover(function(){
// $('.con07-t-1k .tan').slideDown(350)//鼠标移上购物车按钮，下拉框动态打开
// })
// $('.con07-t-1k').mouseleave(function(){
// $('.con07-t-1k .tan').slideUp1(350)//鼠标移开购物车按钮，下拉框动态折叠
})
</script>
<div class="header">
<div class="topMenu">
<ul>
<li>小米商城<span>|</span></li>
<li>MIUI<span>|</span></li>
<li>loT<span>|</span></li>
<li>云服务<span>|</span></li>
<li>金融<span>|</span></li>
<li>有品<span>|</span></li>
<li>小爱开放平台<span>|</span></li>
<li>政企服务<span>|</span></li>
<li>资质证照<span>|</span></li>
<li>协议规则<span>|</span></li>
<li id="ll">下载app<span>|</span>
<div class="down">
<a href="#"><img src="static/images/D.png"></a>
</div>
</li>
<li>Select Region</li>
<li style="margin-left:265px;">登陆<span>|</span></li>
<li>注册<span>|</span></li>
<li id="xxtz">消息通知</li>
<li id="rr" style="float:right;margin-right:1px;"><i class="fa fa-shopping-cart"></i>购物车（0）
<div class="gwc">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 主体 -->
<div class="content">
<!-- logo行 -->
<div class="logotop">
<!-- logo图标 -->
<div class="logo-top"></div>
<!-- logo后10个链接 -->
<div class="logo-menu">
<!-- 白色背景，上下边框线，显示图片链接用 -->
<ul>
<!-- 这个div框包含前8个ul，鼠标移入，下拉显示白色背景，鼠标移出，折叠白色背景 -->
<div class="logo-menu-back">
<li id="uu01"> 小米手机
<!-- 下拉框背景div -->
<div class="uu01-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-b.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<!-- uu02-t：白色边框，占位用 -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-b.png" alt=""><br><a href="#1">小米8 青春版</a><br><a href="#2">1399元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-b.png" alt=""><br><a href="#1">小米8</a><br><a href="#2">2699元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-b.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-b.png" alt=""><br><a href="#1">小米8 SE</a><br><a href="#2">1699元起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu02">红米
<!-- 下拉框背景div -->
<div class="uu02-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-c.png" alt=""><br><a href="#1">红米Note 7</a><br><a href="#2">999元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-c.png" alt=""><br><a href="#1">红米6 Pro</a><br><a href="#2">1299元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-c.png" alt=""><br><a href="#1">红米6</a><br><a href="#2">799元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-c.png" alt=""><br><a href="#1">红米6A</a><br><a href="#2">599元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-c.png" alt=""><br><a href="#1">红米Note 5</a><br><a href="#2">1099元起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu03">电视
<!-- 下拉框背景div -->
<div class="uu03-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-d.png" alt=""><br><a href="#1">小米电视4S 75英寸</a><br><a href="#2">7999元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-d.png" alt=""><br><a href="#1">小米电视4A 32英寸</a><br><a href="#2">899元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-d.png" alt=""><br><a href="#1">小米电视4A 43英寸青春版</a><br><a href="#2">1499元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-d.png" alt=""><br><a href="#1">小米电视4A 50英寸</a><br><a href="#2">1999元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-d.jpg" alt=""><br><a href="#1">小米电视4A 55英寸</a><br><a href="#2">2199元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-d.png" alt=""><br><a href="#1">查看全部</a><br><a href="#2">小米电视</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu04">笔记本
<!-- 下拉框背景div -->
<div class="uu04-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-e.jpg" alt=""><br><a href="#1">小米笔记本Air 12.5"</a><br><a href="#2">3599起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-e.jpg" alt=""><br><a href="#1">小米笔记本Air 13.3"</a><br><a href="#2">4999元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-e.png" alt=""><br><a href="#1">小米笔记本 15.6"</a><br><a href="#2">4199元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-e.png" alt=""><br><a href="#1">小米笔记本Pro 15.6"</a><br><a href="#2">5599元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-e.png" alt=""><br><a href="#1">小米游戏本</a><br><a href="#2">6699元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-e.png" alt=""><br><a href="#1">小米平板</a><br><a href="#2">1099起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu05">家电
<!-- 下拉框背景div -->
<div class="uu05-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-f.jpg" alt=""><br><a href="#1">米家互联网洗烘一体机10kg</a><br><a href="#2">2499元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-f.jpg" alt=""><br><a href="#1">米家互联网空调（一级能效）</a><br><a href="#2">2699元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-f.jpg" alt=""><br><a href="#1">米家互联网空调</a><br><a href="#2">2299元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-f.jpg" alt=""><br><a href="#1">小米净水器</a><br><a href="#2">1999元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-f.jpg" alt=""><br><a href="#1">米家扫地机器人</a><br><a href="#2">1699元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-f.jpg" alt=""><br><a href="#1">新风机</a><br><a href="#2">2499元</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu06">新品
<!-- 下拉框背景div -->
<div class="uu06-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-g.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-g.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-g.png" alt=""><br><a href="#1">小米蓝牙耳机Air</a><br><a href="#2">399元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-g.png" alt=""><br><a href="#1">小米小爱音响HD</a><br><a href="#2">599元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-g.png" alt=""><br><a href="#1">米家台灯Pro</a><br><a href="#2">349元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-g.png" alt=""><br><a href="#1">米家飞天猪足金吊坠</a><br><a href="#2">799元</a&a