这个商家列表我是使用的字符串拼接方式插入的，但是到这里全部修改完后，商家列表的样式没有生效

我的只有contenList.js中插入商家列表的代码不一样，其他的都和老师的一样的，contenList.js如下

(function() {

    /* 获取商家列表数据
        param
     */
    function getList() {
        // 获取contentList的数据
        $.get('../json/homelist.json', function(data) {
            var list = data.data.poilist || [];
            initContentList(list);
        });
    }

    /* 渲染是否时新到热门品牌标签
        param {} data
    */
    function getBrand(data) {
        if (data.brand_type) {
            return '<div class="brand brand-pin">品牌</div>';
        } else {
            return '<div class="brand brand-xin">新到</div>';
        }
    }

    /* 渲染月售
        param {} data
    */
    function getMonthNum(data) {
        var num = data.month_sale_num;

        // 大于999采用999+
        if (num > 999) {
            return '999+';
        }

        return num;
    }

    /* 渲染商家活动
        param {} data
    */
    function getOthers(data) {
        var array = data.discounts2;
        var str = '';

        array.forEach(function(item, index) {
            // 内部的商家活动字符串更新并拼接
            str += '<div class="other-info">' +
                '<img src=' + item.icon_url + ' class="other-tag"/>' +
                '<p class="other-content one-line">' + item.info + '</p>' +
                '</div>';
        });
        return str;
    }

    /* 渲染列表数据
        param []
     */
    function initContentList(list) {
        var html = '';
        list.forEach(function(item, index) {
            // 商家详情的模板字符串
            html += '<div class="r-item-content>' +
                '<img class="item-img" src="' + item.pic_url + '"/>' +
                getBrand(item) +
                '<div class="item-info-content">' +
                '<p class="item-title">' + item.name + '</p>' +
                '<div class="item-desc clearfix">' +
                '<div class="item-score">' + new StarScore(item.wm_poi_score).getStars() + '</div>' +
                '<div class="item-count">月售' + getMonthNum(item) + '</div>' +
                '<div class="item-distance"> ' + item.distance + '</div>' +
                '<div class="item-time">' + item.mt_delivery_time + ' |</div>' +
                '</div>' +
                '<div class="item-price">' +
                '<div class="item-pre-price">' + item.min_price_tip + '</div>' +
                '</div>' +
                '<div class="item-others">' +
                getOthers(item) +
                '</div>' +
                '</div>' +
                '</div>';
        })
        $('.list-wrap').html(html);
    }

    function init() {
        getList();
    }

    init();
})();

这是我引入css文件的路径

这是我的文件夹结构

打开页面是这样的，也没有报错，

在elements里面看各个元素的样式，显示的没有引入相关文件

Aurora_Meteor 2020-04-29

源自：实战：美团外卖-首页实现 2-13 星级评分（2）

收起

4回答

好帮手慕码回答被采纳获得+3积分 2020-04-29 14:45:54

同学你好，可以自己解决部分问题很棒，继续加油。另，关于文件的顺序：渲染的顺序是从上到下的，所以主要来说要避免覆盖问题。视频老师演示的可能是没有覆盖性问题，所以效果不明显，这里给同学举一个例子，如下：

效果：

但是修改css引入顺序：

效果就会发生变化。

js也是如此：

效果：

假如调整js文件顺序：

会报错：

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

收起回答

Aurora_Meteor 提问者 #1

所以说，视频里老师虽然引入文件后效果正确实现了，但是不规范。规范的做法应该是，即使新引入的内容和其他内容是无关的，不会互相影响；但是最好按写的文件顺序来引入文件，防止出现css的覆盖问题和js的调用不到对象的问题，对不？

2020-04-29 15:06:48