老师,我换上星星替换代码以后报错了
(function () {
var itemTmpl =
"<div class='r-item-content'>" +
"<img class='item-img' src=$pic_url />" +
"$brand" +
"<div class='item-info-content'>" +
"<p class='item-title'>$name</p>" +
"<div class='item-desc clearfix'>" +
"<div class='item-score'>$wm_poi_score</div>" +
"<div class='item-count'>月售$monthNum</div>" +
"<div class='item-distance'> $distance</div>" +
"<div class='item-time'>$mt_delivery_time |</div>" +
"</div>" +
"<div class='item-price'>" +
"<div class='item-pre-price'>$min_price_tip</div>" +
"</div>" +
"<div class='item-others'>" +
"$others"+
"</div>"+
"</div>" +
"</div>";
//获取商家列表数据
function getList(){
$.get('../json/homelist.json',function(data){
console.log(data);
var list=data.data.poilist||[];
initContentList(list);
});
}
//渲染是否是新到热门标签(与后端约定好的字段)
function getBrand(data){
if(data.brand_type){
return "<div class='brand brand-pin'>品牌</div>";
}else{
return "<div class='brand brand-xin'>新到</div>";
}
}
//渲染月售
function getMonthNum(data){
var num=data.month_sale_num;
if(num>999){
return "999+";
}
return num
}
//渲染商家活动
function getOthers(data){
var array=data.discounts2;
var str="";
array.forEach(function(item,index){
//内部商家活动模板字符串
var _str="<div class='other-info'>"+
"<img src=$icon_url class='other-tag'/>"+
"<p class='other-content one-line'>$info</p>"+
"</div>";
//模板字符串替换数据
_str=_str.replace("$icon_url",item.icon_url)
.replace("$info",item.info);
//字符串拼接
str=str+_str;
})
return str;
}
//渲染列表数据
function initContentList(list){
list.forEach(function(item,index){
var str=itemTmpl.replace("$pic_url",item.pic_url)
.replace("$name",item.name)
.replace("$distance",item.distance)
.replace("$min_price_tip",item.min_price_tip)
.replace("$mt_delivery_time",item.mt_delivery_time)
.replace("$brand",getBrand(item))
.replace("$monthNum",getMonthNum(item))
.replace("$others",getOthers(item))
.replace("$wm_poi_score",new StarScore(item.wm_poi_score).getStars());
$(".list-wrap").append($(str));
})
}
function init() {
getList();
}
init();
})();
正在回答
同学你好,问题如下:
(1)星星的变量:
效果:
如果我的回答帮到了,欢迎采纳,祝学习愉快~
(function(){
var itemTmpl="<div class='star-score'>$starstr</div>";
function _getStars(){
var _score=this.score.toString();
var scoreArray=_score.split(".");
//满星
var fullstar=parseInt(scoreArray[0]);
//半星
var fullstar=parseInt(scoreArray[1])>=5?1:0;
//0星
var fullstar=5-fullstar-halfstar;
var starstr="";
for(var i=0;i<fullstar;i++){
starstr+="<div class='star fullstar'></div>"
}
for (var j=0;j<halfstar;j++) {
starstr+="<div class='star halfstar'></div>"
}
for (var k=0;k<nullstar;k++) {
starstr+="<div class='star nullstar'></div>"
}
return itemTmpl.replace("$starstr",starstr);
}
window.StartScore=function(score){
this.score=score||"";
this.getStars=_getStars;
}
})();
这个是我的星星JS
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星