小米商城（商品详情页面布局及jQuery选中和价格统计效果）

abstract：小米商城（商品详情页面布局HTML部分）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>红米6A立即购买-小米商城</title><link rel="shortcut icon"

小米商城（商品详情页面布局HTML部分）

<!DOCTYPE html>

<head>

<title>红米6A立即购买-小米商城</title>

</head>

<body>

<li><a href="#">小爱分享平台</a><span>|</span></li>

<li><a href="#">SelectRegion</a></li>

</ul>

<ul>

<div>购物车中还没有商品，赶紧选购吧!</div>

</li>

</ul>

</div>

</div>

<li>小米手机

</li>

</ul>

</form>

</div>

</div>

</div>

</div>

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

<span>北京   北京市   东城区   永定门外街道 <a href="" style="color: #ff6700;"> 修改</a> </span><br>

</div>

</div>

</div>

<p>选择小米提供的保障服务</p>

<a href="#">了解保障服务</a>

</div>

<p style="font-size: 18px; color: #333;">意外保障服务</p>

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

</div>

<p style="font-size: 18px; color: #333;">碎屏保障服务</p>

<p>手机意外碎屏</p>

</div>

<div>

</div>

</div>

<div class="shop_detail_cart">加入购物车</div>

<p><i class="fa fa-check-circle-o"></i> 7天无理由退货 <i class="fa fa-check-circle-o"></i> 15天质量问题换货 <i class="fa fa-check-circle-o"></i> 365天保修 </p>

</div>

</div>

<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>

<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>

</div>

</div>

</div>

<ul>

<li>小米天猫店<span></span></li>

<li>Select Region</li>

</ul>

</div>

京ICP证110507号

<a href="">京ICP备10046444号</a>

<a href="">京公安网备11010802020134号</a>

<br>

违法和不良信息举报电话：185-0130-1238,本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

</div>

</div>

探索黑科技，小米为发烧而生!

</div>

</body>

</html>

小米商城（商品详情页面布局CSS部分）

* {margin: 0px; padding: 0px;}

li {list-style: none;}

a {text-decoration: none; color: #ccc; cursor: pointer;}

h1,h2,h3,h4,h5,h6 {font-weight: 300;}

.clear {clear: both;}

.detail {width: 100%; height: 65px; border-top: 1px solid #ccc; line-height: 65px; box-shadow: -3px 5px 10px #eee;}

.detail_left {float: left;}

.detail_right {float: right;}

.detail a {font-size: 10px; color: #444; display: inline-block;}

.detail span {border-left: 2px solid #ccc; height: 12px; margin: 0px 7px; display: inline-block;}

.shop_detail {width: 1226px; margin: 30px auto;}

.shop_detail_pic {width: 560px; height: 600px; float: left; margin-right: 30px;}

.shop_detail_menu {width: 600px; float: right;}

.shop_detail_menu h1 {font-size: 27px;}

.shop_detail_menu h2 {color: #ff6700; font-size: 20px; border-bottom: 1px solid #ccc; height: 50px; line-height: 50px;}

.shop_detail_menu p {font-size: 13px; color: #ccc;}

.detail_map {width: 558px; border: 1px solid #ccc; background: #fafafa;padding: 30px 10px 30px 30px; line-height: 20px; margin: 30px 0px; font-size: 14px;}

.shop_detail_much, .shop_detail_color {width: 600px; }

/* jQurery中替换版本的class样式 */

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

.shop_detail_much p {font-size: 18px; color: #333; margin-bottom: 15px;}

.shop_detail_much div {font-size: 15px; padding: 0px 20px;float: left; width: 255px;height: 50px; line-height: 50px;border: 1px solid #ccc;}

.shop_detail_much span {float: right; color: #ccc;}

.shop_detail_color p {font-size: 18px; color: #333; margin: 15px 0px;}

.shop_detail_color div {font-size: 15px; padding: 0px 20px;float: left; width: 255px;height: 50px; line-height: 50px;border: 1px solid #ccc; text-align: center;}

.shop_detail_color span {display: inline-block; width: 16px; height: 16px; border-radius: 8px; margin-right: 10px;}

/* jQuery中替换颜色的class样式 */

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

.shop_detail_bz0 p { font-size: 18px; color: #333; margin: 20px 0px;float: left;}

.shop_detail_bz0 a {float: right; color: #ff6700; margin: 27px 0px; font-size: 13px;}

.shop_detail_bz1 {border: 1px solid #ccc; width: 598px; height: 150px; }

.shop_detail_bz1 span {float: left; width: 10px; height: 10px; line-height: 10px; display: inline-block; border-radius: 6px; margin: 60px 0px; margin-left: 40px;}

.shop_detail_bz1 img {float: left; margin: 50px 20px;}

.shop_detail_1 {margin: 40px 0px;}

.shop_detail_1 p {margin-bottom: 10px;}

.shop_detail_1 b {width: 10px; height: 10px; line-height: 10px; display: inline-block;}

.shop_detail_1 span {float: right; margin: 0px;margin-right: 20px; color: #aaa; width: 50px;}

.shop_detail_button {color: rgba(0,0,0,0); border: 1px solid #ccc;}

/* jQuery中选中服务的class样式 */

.shop_detail_bz1 .checked {color: #ff6700;}

.shop_detail_zj {width: 600px; height: 130px; background: #f9f9fa; margin-top: 30px; }

.shop_detail_zj div {margin: 0px 30px 20px;width: 540px; height: 50px; line-height: 50px;}

.shop_detail_zj p {color: #333; float: left; font-size: 15px;}

.shop_detail_zj span {color: #333; float: right; font-size: 15px;}

.shop_detail_cart {width: 300px; height: 50px; text-align: center; line-height: 50px; background: #ff6700; font-size: 18px; margin-top: 30px; color: #fff;}

.shop_detail_cart+p {font-size: 15px; margin: 20px 0px;}

.detail_content {background: #f9f9fa;}

.detail_content_1 {margin: 0px auto; width: 1226px; padding: 20px 0px;}

小米商城（商品详情页面布局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_much_left').click(function(){

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

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

updateTotalPrice();

})

// 点击选中其它颜色

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

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

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

})

//选中小米提供的保障服务

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

var nowcircleclass=$(this).find('.fa-check-circle').attr('class');//获取到现在的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;

//获取选中的服务的价格

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+'元');

}

})

Correcting teacher：西门大官人Correction time：2019-04-01 10:07:53
Teacher's summary：作业写的不错，样式命名基本做到见名知意，js代码结构清晰

小米商城（商品详情页面布局及jQuery选中和价格统计效果）

Popular Entries