abstract:老師,最近家里除了一些事情,導(dǎo)致沒有時間來聽課,初級的課程僅剩下不到10天,我實在是沒有時間來學(xué)習(xí),麻煩老師幫忙審核作業(yè)通過以下好嗎?我想把初級的課程,包括里面的選修課緩存下來,忙過這段時間后,我再仔細(xì)聽講。謝謝老師了??!------------我的這個作業(yè)點擊變色實現(xiàn)了,就是累加價格沒有實現(xiàn),希望老師能幫忙告知哪里的問題,謝謝!我是按照現(xiàn)在小米官網(wǎng)做的。html部分<!DOCTYPE&nb
老師,最近家里除了一些事情,導(dǎo)致沒有時間來聽課,初級的課程僅剩下不到10天,我實在是沒有時間來學(xué)習(xí),麻煩老師幫忙審核作業(yè)通過以下好嗎?我想把初級的課程,包括里面的選修課緩存下來,忙過這段時間后,我再仔細(xì)聽講。謝謝老師了??!
------------
我的這個作業(yè)點擊變色實現(xiàn)了,就是累加價格沒有實現(xiàn),希望老師能幫忙告知哪里的問題,謝謝!
我是按照現(xiàn)在小米官網(wǎng)做的。
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(){ //默認(rèn)選中第一個版本和第一個顏色 $('.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() }) // 選擇小米保障服務(wù) $('.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關(guān)鍵字 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') // 清除下面框的選中狀態(tài) $('.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關(guān)鍵字 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') // 清除上面框的選中狀態(tài) $('.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關(guān)鍵字 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 //服務(wù)價錢 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'})//購物車框鼠標(biāo)移上背景變白色,自體顏色變桔紅 }) $('#rr').mouseleave(function(){ $(this).css({'background':'#424242','color':'#ccc'})//購物車框鼠標(biāo)移出背景變原來灰色,文字變原灰色 }) $('.down').hide()//下載app的下拉框默認(rèn)隱藏 $('#ll').mouseover(function(){ $('.down').show()//鼠標(biāo)移上下載app按鈕,下拉框顯示 }) $('#ll').mouseleave(function(){ $('.down').hide()//鼠標(biāo)移開下載app按鈕,下拉框隱藏 }) $('#rr').mouseover(function(){ $('this').css('background','#fff')//鼠標(biāo)移上購物車按鈕,背景變白色 }) $('#rr').mouseleave(function(){ $('this').css('background','#424242')//鼠標(biāo)移開購物車按鈕,背景變原來灰色 }) $('.gwc').hide()//購物車下拉框默認(rèn)隱藏 $('#rr').mouseover(function(){ $('.gwc').slideDown(350)//鼠標(biāo)移上購物車按鈕,下拉框動態(tài)打開 }) $('#rr').mouseleave(function(){ $('.gwc').slideUp(350)//鼠標(biāo)移開購物車按鈕,下拉框動態(tài)折疊 }) // 關(guān)于鼠標(biāo)移上變色,有的用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)//鼠標(biāo)移上購物車按鈕,下拉框動態(tài)打開 // }) // $('.con07-t-1k').mouseleave(function(){ // $('.con07-t-1k .tan').slideUp1(350)//鼠標(biāo)移開購物車按鈕,下拉框動態(tài)折疊 }) </script> <div class="header"> <div class="topMenu"> <ul> <li>小米商城<span>|</span></li> <li>MIUI<span>|</span></li> <li>loT<span>|</span></li> <li>云服務(wù)<span>|</span></li> <li>金融<span>|</span></li> <li>有品<span>|</span></li> <li>小愛開放平臺<span>|</span></li> <li>政企服務(wù)<span>|</span></li> <li>資質(zhì)證照<span>|</span></li> <li>協(xié)議規(guī)則<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圖標(biāo) --> <div class="logo-top"></div> <!-- logo后10個鏈接 --> <div class="logo-menu"> <!-- 白色背景,上下邊框線,顯示圖片鏈接用 --> <ul> <!-- 這個div框包含前8個ul,鼠標(biāo)移入,下拉顯示白色背景,鼠標(biāo)移出,折疊白色背景 --> <div class="logo-menu-back"> <li id="uu01"> 小米手機(jī) <!-- 下拉框背景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">米家互聯(lián)網(wǎng)洗烘一體機(jī)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">米家互聯(lián)網(wǎng)空調(diào)(一級能效)</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">米家互聯(lián)網(wǎng)空調(diào)</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">米家掃地機(jī)器人</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">新風(fēng)機(jī)</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">小米藍(lán)牙耳機(jī)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&aCorrecting teacher:天蓬老師Correction time:2019-03-29 14:19:26
Teacher's summary:能體會到你的難處, 又要工作, 又要學(xué)習(xí), 的確不容易, 在其它人盡情享樂打游戲的時光, 你能用來學(xué)習(xí), 本身就值得表揚(yáng)點贊, 加油別放棄