商品详情页及价格总计

abstract：<div class="toubu"><div class="toubu_content mc"><div class="toubu_l l"><label>小米8</label><span></span><a href=""&g

<div class="toubu">

<div class="toubu_content mc">

<div class="toubu_l l">

<label>小米8</label><span></span>

<a href="">小米8 SE</a>

</div>

<div class="toubu_r r">

<a href="">概述</a><span></span>

<a href="">图集</a><span></span>

<a href="">参数</a><span></span>

<a href="">F码通道</a><span></span>

<a href="">用户评价</a>

</div>

</div>

</div>

<div class="main_content mc">

<div class="main_content_l l" id="slideShowContainer">

<ul id="picUl">

<li><a href="#"><img src="img/lun/1.jpg" alt=""/></a></li>

</ul>

</div>

<div class="main_content_r r">

<div class="r1">

<h1>小米8</h1>

<p class="hui_s">12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身</p>

<p class="r1_p">599</p>

</div>

<div class="r2">

<p class="mt20"><i class="layui-icon layui-icon-location"></i>北京 北京市 东城区 永定门外街道 <span>修改</span> </p>

<p style="color:#ff5700;">有现货</p>

</div>

<div class="r3">

<h2>选择版本</h2>

<p class="box_s">4GB+64GB 全网通 <span data-val="599">599元</span></p>

<p class="box_s">6GB+64GB 全网通 <span data-val="699">699元</span></p>

</div>

<div class="clear"></div>

<div class="r4">

<h2>选择颜色</h2>

<p class="box_s">金色</p>

<p class="box_s">深灰</p>

<p class="box_s">亮红</p>

<p class="box_s">亮蓝</p>

</div>

<div class="clear"></div>

<div class="r5">              

<h2 style="float:left;">选择小米提供的保障服务</h2>

<a class="r5a">了解保障服务

<i class="layui-icon layui-icon-right"></i></a>                

<div class="clear"></div>

<div class="box_m">

<div class="box_ml l">

<input type="checkbox">

<img src="img/bz.jpg">

</div>

<div class="box_mr l">

<h2>意外保障服务</h2>

<p class="hui_s">手机意外摔落/进水/碾压等损坏</p>

<p><input type="checkbox">我已阅读

<a href="">服务条款</a>|<a href="">服务条款</a>

<span data-val="99">99元</span>

</p>

</div>

</div>

<div class="box_m">

<div class="box_ml l">

<input type="checkbox">

<img src="img/bz.jpg">

</div>

<div class="box_mr l">

<h2>意外保障服务</h2>

<p class="hui_s">手机意外摔落/进水/碾压等损坏</p>

<p><input type="checkbox">我已阅读

<a href="">服务条款</a>|<a href="">服务条款</a>

<span data-val="179">179元</span>

</p>

</div>

</div>

</div>

<div class="clear"></div>

<div class="r6">

<p id="jx" style="font-size:14px;padding:30px 50px 10px;"></p>

<span id="dj"style="position:relative;left:-50px;top:-30px;">123</span>

<p id="jg" style="font-size:20px;color:#ff6700;padding:30px 50px;"></p>                

</div>

<button>加入购物车</button>

<p class="hui_s"> 7天无理由退货  15天质量问题换货  365天保修</p>

</div>

</div>

头部与主页相同，不述。.css文件

.toubu{width:100%;height:60px;border:1px solid #e0e0e0;box-shadow:0 5px 10px 0 #eee;}

.toubu_content{height:60px;font-size:12px;color:#757575;text-align: center;line-height: 12px;padding:24px 0;}

.toubu_l label{font-weight: bold;color:black;float:left;}

.toubu span{width:0px;height:12px;border-right:2px solid #ccc;float:left;margin:0 7px;}

.toubu_content a:hover{color:#ff6700;}

.main_content{margin-top: 35px;}

.main_content_l{width:450px;height: 450px;}

.main_content_l img{width:450px;height: 450px;}

.main_content_r{width:600px;}

.main_content_r h2{padding:12px 0;}

.r1{width:600px;height:100px;border-bottom: 1px solid #e0e0e0;margin-bottom:40px;}

.r1_p{font-size:20px;color:#ff6700;margin:10px 0;}

.r2{width:600px;background-color:#fafafa;border: 1px solid #e0e0e0;}

.r2 p{padding:0 0 0 40px;}

.r2 span{color:#ff6700;}

.r2 span:hover{cursor:pointer;}

.r2{margin-bottom:20px;padding:35px 0;}

.r3{margin:18px 0;}

.r3 p{font-size:14px;float:left;}

.r3 span{font-size:14px;color:#ccc;float:right;}

.r4{margin:18px 0;}

.r4 p{font-size:14px;text-align: center;}

.r5{margin:18px 0;}

.r5a{float:right;color:#ff6700;position:relative;top:18px;}

.r5a:hover{cursor: pointer;}

.r6{width:600px;height:150px;background-color: #e0e0e0;margin:30px 0;}

.r6 span{font-size:14px;color:#656565;float:right;}

.box_s{width:252px;height:14px;padding:17px 20px;border: 1px solid #e0e0e0;float:left;margin-right:4px;margin-bottom:4px;}

.checked{border:1px solid #ff6700;}

.box_m{width:598px;height:150px;border: 1px solid #e0e0e0;}

.box_ml{width:150px;height:150px;line-height: 150px;text-align: center;}

.box_mr{width:400px;height:100px;line-height: 26px;padding-top:15px;}

.box_mr a{color:#ff6700;float:none;}

.box_mr span{font-size:14px;color:#ccc;float:right;}

.hui_s{font-size:12px;color:#ccc;}

h1,h2,h3{font-weight: 300px;}

.main_content_r button{font-size:20px;background-color:#ff6700;width:300px;height:50px;border:none;color:#fff;margin-bottom:20px;}

.main_foot{background:#f9f9fa;padding:35px 0 15px;font-size:25px;}

.main_foot img{padding:10px 0;}

.js文件

$(function(){

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

$('.r3>p').eq(0).attr('class','box_s checked');

$('.r4>p').eq(0).attr('class','box_s checked');

updateTotalPrice()

//点击选中其他的颜色

$('.r3>p').click(function(){

$('.r3>p').attr('class','box_s');

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

updateTotalPrice()

});

//点击选中手机版本

$('.r4>p').click(function(){

$('.r4>p').attr('class','box_s');

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

updateTotalPrice();

})

//点击保障服务

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

if($(this).find('input[type=checkbox]')[0].checked){

$(this).find('input[type=checkbox]')[0].checked=false;

$(this).find('input[type=checkbox]')[1].checked=false;

}else{

$(this).find('input[type=checkbox]')[0].checked=true;

$(this).find('input[type=checkbox]')[1].checked=true;

}

updateTotalPrice();

})

//统计总价格

function updateTotalPrice(){

//版本价钱

var bb=$(".r3>p[class$='checked']").text().substr(0,9);

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

var cc=$(".r4>p[class$='checked']").text();

//服务价钱

var svprice=0;

var svspan=$(':checked').parent().find('span[data-val]');

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

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

}

//总价值

var totalprice=bbprice+svprice;

$('#jg').html('总计&nbsp;：&nbsp;'+totalprice+'元');

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

$('#jx').html('小米8&nbsp'+bb+cc);

}

})

Correcting teacher：韦小宝Correction time：2019-02-11 17:01:07
Teacher's summary：下次记得把代码复制完整点啊！不然这边要访问还要去找你之前的作业去拼接！