老师,我换上星星替换代码以后报错了

老师,我换上星星替换代码以后报错了

(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'>&nbsp;$distance</div>" +

             "<div class='item-time'>$mt_delivery_time&nbsp;|</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();

})();



正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,问题如下:

(1)星星的变量:

http://img1.sycdn.imooc.com//climg/5e60610b090d493a05130204.jpg

http://img1.sycdn.imooc.com//climg/5e60613009b3921b03970175.jpg

效果:

http://img1.sycdn.imooc.com//climg/5e60613a09feb23308830400.jpg

如果我的回答帮到了,欢迎采纳,祝学习愉快~

  • 慕粉8021849 提问者 #1
    老师,我修改完以后,也不出现星星也没报错了。。
    2020-03-05 10:32:56
提问者 慕粉8021849 2020-03-04 21:34:16

(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 

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师