老师不知道问题出在哪 没报错 没加上购物车

老师不知道问题出在哪 没报错 没加上购物车

# 具体遇到的问题
http://img1.sycdn.imooc.com//climg/5fd715ca0923f1c613080904.jpg# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

right.js

(function(){

    var itemTmpl='<div class="menu-item">'+

                      '<img class="img" src=$picture />'+

                      '<div class="menu-item-right">'+

                         '<p class="item-title">$name</p>'+

                         '<p class="item-desc">$description</p>'+

                         '<p class="item-zan">$praise_content</p>'+

                         '<p class="item-price">¥$min_price<span class="unit">/$unit</span></p>'+

                      '</div>'+

                      '<div class="select-content">'+

                          '<div class="minus"></div>'+

                          '<div class="count">$chooseCount</div>'+

                          '<div class="plus"></div>'+

                      '</div>'+

                 '</div>';

        function initRightList(list){

            //清除数据 防止refresh出很多数据

            $('.right-list-inner').html('');

            list.forEach(function(item,index){


                if (!item.chooseCount){

                    item.chooseCount=0;

                }

                var str=itemTmpl

                        .replace('$picture',item.picture)

                        .replace('$name',item.name)

                        .replace('$description',item.description)

                        .replace('$praise_content',item.praise_content)

                        .replace('$min_price',item.min_price)

                        .replace('$unit',item.unit)

                        .replace('$chooseCount',item.chooseCount);

                // 模板字符串转换成jq对象 目的将数据进行绑定

                var $target=$(str);  

                //itemdata自定义取回数据的名称   target是数组   

                $target.data('itemData',item);

                

                $('.right-list-inner').append($target);

            })

        }

        // 渲染右侧title


        function initRightTitle(str){


            $('.right-title').text(str);

        }

        



        function addClick(){

            $('.menu-item').on('click','.plus',function(e){

                var $count=$(e.currentTarget).parent().find('.count');

                

                $count.text(parseInt($count.text()||'0')+1);


                var $item = $(e.currentTarget).parents('.menu-item').first();

               var itemData= $item.data('itemData');

               

               itemData.chooseCount=itemData.chooseCount+1;



               window.ShopBar.renderItems();


            });

            $('.menu-item').on('click','.minus',function(e){

                var $count=$(e.currentTarget).parent().find('.count');


                if($count.text()==0return;

                $count.text(parseInt($count.text()||'0')-1);

                

                var $items = $(e.currentTarget).parents('.menu-item').first();

               var itemData= $items.data('itemData');

               itemData.chooseCount=itemData.chooseCount-1;

               window.ShopBar.renderItems();

            });

            


        }

        function init(data){

            initRightList(data.spus || []);

            initRightTitle(data.name);

            addClick();

        }


        window.Right={

            refresh: init

        }

        

})();

shopbar.js

(function(){

    //顶部模板字符串

    var itemTopTmpl ='<div class="choose-content">'+

                        '<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">另需配送&nbsp;<span class="shipping-fee">0</span></p>'+

                        '</div>'+

                        '<div class="submit-btn">去结算</div>'+

                    '</div>';

//1 转换成jq对象

var $strBottom=$(itemBottomTmpl);

var $strTop=$(itemTopTmpl);





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){

            //如果菜品数量>0就开始渲染数据

            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);

            }

        })

    })

}




//替换 init进来

function init(data){

    $('.shop-bar').append($strTop);

    $('.shop-bar').append($strBottom);

}

init();


window.ShopBar={

    renderItems:renderItems

}


})();

​在这里输入代码,可通过选择【代码语言】突出显示

正在回答

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

2回答

你好,老师测试代码确实是有报错,但是购物车是没有问题的

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

这个报错是因为window.ShopBar.changeShippingPrice方法并不存在,后面课程中在shopBar.js文件中设置了此方法,可以继续往下面看哦:

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

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

关于购物车的问题,同学可以查看私信解决。

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

祝学习愉快!

好帮手慕星星 2020-12-14 17:56:18

同学你好,测试粘贴的代码效果没有问题,可以加上购物车

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

建议清除浏览器缓存进行测试或者更换浏览器进行测试下。

祝学习愉快!

  • 提问者 小丸子不吃丸子 #1

    我清除缓存也换了浏览器 都没用 

    2020-12-14 18:24:24
  • 你好,经再次测试代码确实没有问题。建议将left.js文件代码粘贴上来,可能是数据的问题,老师帮助测试下。

    2020-12-14 19:09:24
  • 提问者 小丸子不吃丸子 #3

    (function(){

        var itemTmpl='<div class="left-item">'+

                         '<div class="item-text">$getItemContent</div>'+

                     '</div>';

    //请求点餐数据obj

        function getList(){

            $.get('../json/food.json',function(data){

                console.log(data);

                window.food_spu_tags=data.data.food_spu_tags || [];

                

                initContentList(window.food_spu_tags);


                window.ShopBar.changeShippingPrice(data.data.poi_info.shipping_fee || 0);

            })

        }


    //渲染item内容 obj

       function getItemContent(data){

           if(data.icon){

               return '<img class="item-icon" src='+data.icon+' />'+data.name;

           }else{

               return data.name;

           }

       }


    //渲染列表array

       function initContentList(list){

           list.forEach(function(item,index){

                var str=itemTmpl

                        .replace('$getItemContent',getItemContent(item));

            //    将item数据挂载在Left-item上

                var $target=$(str);

                $target.data('itemData',item);


                $('.left-bar-inner').append($target);


           })

       }


        function addClick(){

            //最外层父元素 给leftitem绑定

            $('.menu-inner').on('click','.left-item',function(e){



                var $target=$(e.currentTarget);

                $target.addClass('active');

                $target.siblings().removeClass('active');


                //将数据传给右侧详情列表 进行渲染

                window.Right.refresh($target.data('itemData'));

                

            });

        }

        function init(){

            getList();

            addClick();

        }

        init();

    })();


    2020-12-14 20:17:04
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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