通过append添加的标签，不能添加样式
来源：2-5 详情页-购物车（5）
weixin_慕设计7122316
2020-03-29 23:03:45
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
<script type="text/javascript" src="../lib/fontSizeRem.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/reset.css">
<link rel="stylesheet" type="text/css" href="../common/navHeader/navHeader.css">
<link rel="stylesheet" type="text/css" href="../common/headerTab/headerTab.css">
<link rel="stylesheet" type="text/css" href="./left/left.css">
<link rel="stylesheet" type="text/css" href="./right/right.css">
<link rel="stylesheet" type="text/css" href="./shopBar/shopBar.css">
<title>深圳麦当劳前海二餐厅</title>
</head>
<body>
<!-- 头部开始 -->
<nav class="nav">
<div class="back-icon"></div>
<h4 class="title">深圳麦当劳前海二餐厅</h4>
</nav>
<!-- 头部结束 -->
<!-- tabbar开始 -->
<div class="tab-bar"></div>
<!-- tabbar结束 -->
<!-- 点菜内容区开始 -->
<div class="menu-inner">
<div class="left-bar">
<div class="left-bar-inner"></div>
</div>
<div class="right-content">
<p class="right-title"></p>
<div class="right-list">
<div class="right-list-inner"></div>
</div>
</div>
<!-- 购物车区域开始 -->
<div class="shop-bar"></div>
<div class="mask hide"></div>
<!-- 购物车区域结束 -->
</div>
<!-- 点菜内容区结束 -->
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../common/headerTab/headerTab.js"></script>
<script type="text/javascript" src="./left/left.js"></script>
<script type="text/javascript" src="./right/right.js"></script>
<script type="text/javascript" src="./shopBar/shopBar.js"></script>
</body>
</html>
(function () {
// 购物车顶部模板字符串
var itemTopTmpl = '<div class="choose-content hide">'+
'<div class="content-top">'+
'<div class="clear-car">清空购物车</div>'+
'</div>'+
'</div>';
// 底部模板字符串
var itemBottomTmpl = '<div class="bottom-content">'+
'<div class="shop-icon">'+
'<div class="dot-num hide"></div>'+
'</div>'+
'<div class="price-content">'+
'<p class="total-price">¥<span class="total-price-span">0</span></p>'+
'<p class="other-price">另需配送 ¥<span class="shipping-fee">0</span></p>'+
'</div>'+
'<div class="submit-btn">去结算</div>'+
'</div>';
var $strBottom = $(itemBottomTmpl),
$strTop = $(itemTopTmpl);
function changeShippingPrice(str) {
$strBottom.find('.shipping-fee').text(str);
}
function changeTotalPrice(str) {
$strBottom.find('.shipping-fee').text(str);
}
// 购物车顶部
function renderItems(){
$strTop.find('.choose-item').remove();
var list = window.food_spu_tags || [];
var tmpl = '<div class="choose-item">'+
'<div class="item-name">$name</div>'+
'<div class="price">¥<span class="total">$price</span></div>'+
'<div class="select-content">'+
'<div class="minus"></div>'+
'<div class="count">$chooseCount</div>'+
'<div class="plus"></div>'+
'</div>';
var totalPrice = 0;
list.forEach(function(item){
item.spus.forEach(function(_item){
// 如果有菜品数量大于零，则开始渲染这条数据
if (_item.chooseCount > 0) {
// 计算每个菜品的总价 单价*数量
var price = _item.min_price*_item.chooseCount;
var row = tmpl.replace('$name',_item.name)
.replace('$price',price)
.replace('$chooseCount',_item.chooseCount)
// 计算购物车的总价
totalPrice += price;
var $row = $(row);
$row.data('itemData',_item);
$strTop.append($row);
}
})
})
}
function addClick(){
}
function init (data){
$('.shop-bar').append($strTop);
$('.shop-bar').append($strBottom);
};
init();
window.ShopBar = {
renderItems:renderItems,
changeShippingPrice:changeShippingPrice,
changeTotalPrice:changeTotalPrice
}
})();
.shop-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.shop-bar .bottom-content {
height: 1.333333rem;
display: flex;
background-color: rgba(51,51,51,0.9);
}
.shop-bar .shop-icon {
width: 1.466667rem;
height: 1.466667rem;
background-image: url('./img/shop-icon.png');
background-size: cover;
margin-top: -0.4rem;
margin-left: 0.32rem;
position: relative;
}
.shop-bar .price-content {
flex: 1;
padding-top: 0.213333rem;
padding-left: 0.186667rem;
}
.shop-bar .total-price {
font-size: 0.533333rem;
color: #fff;
}
.shop-bar .other-price {
font-size: 0.32rem;
color: #999;
margin-top: 0.053333rem;
}
.shop-bar .dot-num {
position: absolute;
background-color: #fb4e44;
width: 0.4rem;
height: 0.4rem;
font-size: 0.32rem;
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
right: 0;
top: 0.053333rem;
text-align: center;
line-height: 0.4rem;
}
.shop-bar .submit-btn {
width: 2.933333rem;
height: 100%;
background-color: #ffd161;
color: #333;
font-size: 0.426667rem;
line-height: 1.333333rem;
text-align: center;
}
.choose-content {
background-color: #fff;
}
.choose-content .content-top {
height: 0.933333rem;
background-color: #f4f4f4;
font-size: 0.293333rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.choose-content .clear-car {
margin-left: 0.266667rem;
margin-right: 0.133333rem;
float: left;
position: relative;
}
.choose-content .clear-car::after {
content: ' ';
width: 0.346667rem;
height: 0.346667rem;
display: block;
background-image: url('./img/clear.jpeg');
background-size: cover;
position: absolute;
top: -0.026667rem;
left: -0.373333rem;
}
.choose-content.choose-item {
display: flex;
font-size: 0.4rem;
color: #2f2f2f;
height: 0.933333rem;
align-items: center;
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
border-bottom: 1px solid #ddd;
}
.choose-content .choose-item {
display: flex;
font-size: 0.4rem;
color: #2f2f2f;
height: 0.933333rem;
align-items: center;
padding-top: 0.266667rem;
padding-bottom: 0.266667rem;
border-bottom: 1px solid #ddd;
}
.choose-content .choose-item .price {
margin-left: 0.133333rem;
margin-right: 0.666667rem;
}
.choose-content .choose-item .item-name {
flex: 1;
padding-left: 0.266667rem;
}
.choose-content .select-content {
position: relative;
margin-right: 0.213333rem;
display: flex;
}
.choose-content .plus {
width: 0.666667rem;
height: 0.666667rem;
background-image: url('./img/plus.png');
background-size: cover;
}
.choose-content .minus {
width: 0.666667rem;
height: 0.666667rem;
background-image: url('./img/minus.png');
background-size: cover;
}
.choose-content .count {
font-size: 0.4rem;
color: #2f2f2f;
width: 0.666667rem;
height: 0.666667rem;
line-height: 0.666667rem;
margin-left: 0.053333rem;
margin-right: 0.053333rem;
text-align: center;
}
.mask {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0,0,0,0.7);
}
1回答
-
好帮手慕糖
2020-03-30
同学你好，老师这边测试样式都是有的，同学可以清楚下缓存，再次测试下，若还是有问题。建议：可以说明下，具体是哪个标签的样式没有设置上哦。便于准确的定位与解决问题。
祝学习愉快~
0
相似问题
回答 2
回答 2