left.js和right.js

提问：

right.js中的init方法为什么没有执行？尝试console.log data也出不来 alert 也没有反映。拿不到left.js 的left-item挂载的数据 menu-item 就无法渲染出来求解决办法
left.js文件中的这个想拿到这个挂载的data数据为什么拿不到？

陈立天 2020-09-16

源自：实战：详情页与购物车开发 3-2 项目作业

19

收起

4回答

好帮手慕言回答被采纳获得+3积分 2020-09-17 09:53:16

同学你好，点击左侧列表，才会执行window.Right.refresh($target.data('itemData'));才会把数据传输到right.js，例如：

控制台：

建议：默认第一个是选中状态，这样不用点击，就可以拿到数据

祝学习愉快~

提问者陈立天 2020-09-16 22:50:09

left.js是拿到数据了但是right.js init 里面的data拿不到数据

好帮手慕言 2020-09-16 16:17:33

同学你好，解答如下：

1、类名写的有问题，少了-，siblings后面没有加括号，如下：

绑定在$target上，就通过$target获取，往left-bar-inner插入的是$target，修改如下：

2、按照上方修改，第二个问题就可以解决。

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

提问者陈立天 2020-09-16 13:34:51

menu.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimum-scale=1">
    <title>订单</title>
    <script src="../lib/jquery.js"></script>
    <!-- 适配方案 -->
        <script type="text/javascript">
            (function($) {
                'use strict'
                var docEl = document.documentElement;
 
            // 解决dpr一边框像素问题
            var dpr = window.devicePixelRatio || 1,
                viewPortEl = document.querySelector('meta[name="viewport"]'),
                maxWidth = 540,
                minWidth = 320;
 
            dpr = dpr >= 3 ? 3:(dpr >= 2 ? 2 :1);
 
            docEl.setAttribute('data-dpr',dpr);
            docEl.setAttribute('max-width', maxWidth);
            docEl.setAttribute('min-width', minWidth);
 
            var scale = 1/ dpr,
            content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' +scale+',user-scalable=no';  
 
            if(viewPortEl){
                viewPortEl.setAttribute('content',content);
            }else{
                viewPortEl = createElement('meta');
                viewPortEl.setAttribute('name','viewport');
                viewPortEl.setAttribute('content',content);
                document.head.appendChild(viewPortEl);
            }
 
            // 设置Rem的单位
            function setRemUnit(){
                // 获取rem基准值
                var viewWidth = docEl.clientWidth;
                 
                if(viewWidth && (viewWidth / dpr > maxWidth)) {
                    viewWidth = maxWidth * dpr;
                }else if(viewWidth && (viewWidth / dpr < minWidth)){
                    viewWidth = minWidth * dpr;
                }
 
                var rem =viewWidth / 10;
 
                docEl.style.fontSize= rem + 'px';
            }
            setRemUnit();
 
            // 页面发生变化执行setRemUnit方法计算html根元素的font-size
            window.addEventListener('resize',setRemUnit);
            window.addEventListener('pageshow',setRemUnit);
            })(jQuery);
    </script>
 
    <link rel="stylesheet" href="../lib/base.css">
    <link rel="stylesheet" href="../commom/navHeader/navaHeader.css">
    <link rel="stylesheet" href="../commom/headerTab/headerTab.css">
    <link rel="stylesheet" href="./left/left.css">
 
</head>
<body>
    <div class="nav">
        <div class="back-icon"></div>   
        <h4 class="title">深圳麦当劳前海二餐厅</h4>
    </div>
    <div class="tab-bar">
        <!-- js-loading--tab-item -->
    </div>
    <div class="menu-inner">
        <div class="left-bar">
            <div class="left-bar-inner"></div>
        </div>
        <div class="right-content">
            <div class="right-title"></div>
            <div class="right-list">
                <div class="right-list-inner"></div>
            </div>
        </div>
        <div class="shop-bar">
            <div class="choose-content"></div>
            <div class="bottom-content"></div>
        </div>
        <div class="mask hide"></div>
    </div>
     
 
    <script src="./left/left.js"></script>
    <script src="../commom/headerTab/headerTab.js"></script>
    <script src="../menu/right/right.js"></script>
 
     
</body>
</html>

right.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

(function($) {
    'use strict'
    var itemTmpl = '<div class="menu-item">'+
                        '<img src=$picture>'+
                        '<div class="menu-item-right">'+
                            '<p class="item-title">$name</p>'+
                            '<p class="item-decs">>$description</p>'+
                            '<p class="item-zan">$praise_content</p>'+
                            '<p class="item-price">>¥$min_price<span class=unit>$unit</p>'+
                        '</div>'+
                        '<div class="select-content"></div>'
                   '</div>'
 
    function initRightTitle(){
         
    }
 
    function initRightList(){
         
    }
     
 
    function init(data){
        alert(1);
        console.log('rightData:',data);
        initRightList(data.spus || []);
        initRightTitle(data.name || []);
    }
 
    window.Right = {
        refresh:init
    }
     
})(jQuery);

left.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

(function($) {
    'use strict'
    var itemTmpl = '<div class="left-item">'+
                        '<div class="itent-text">'+
                            '$getItemContent'+
                        '</div>'
                   '</div>'
 
    function getItemContent(data){
        if(data.icon){
            return '<img class="item-icon" src='+data.icon+' />'+data.name;
        }else{
            return data.name;
        }
    }
 
    function initContentList(list){
        list.forEach(function(item,index){
            var str = itemTmpl.replace('$getItemContent',getItemContent(item));
 
            // 挂载data数据到dom上
            var $target = $(str)
            $target.data('itemData',item);
 
            console.log('$targetData', $('.left-item').data('itemData'));
 
            $('.left-bar-inner').append(str);
        })
    }
 
    function getList(){
        $.get('../json/food.json',function(data){
            console.log('foodData',data);
            window.food_spu_tags = data.data.food_spu_tags || [];
            initContentList(window.food_spu_tags);
             
        })
    }
 
    function addClick(){
        $('.menu-inner').on('click','.leftitem',function(e){
            var $target = $(e.currentTarget);
 
            $target.addClass('active');
            $target.siblings.removeClass('active');
 
            window.Right.refresh($target.data('itemData'));
 
        });
    }
 
    (function init(){
        getList();
        addClick();
         
    })()
})(jQuery);

相似问题

left.js right.js shopBar.js 中绑定了三次的itemData

为什么这样就能将数据传给右侧详情列表了？

调用的那个函数

我想问下源码中挂载了3次data数据在元素上，有什么意义？

访问不到dom元素

登录后可查看更多问答，登录/注册

3.WebAPP开发与小程序

参与学习人
提交作业 622 份
解答问题 6815 个

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

本课精华内容

问答作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下为什么谷歌浏览器点不了进度条没次点击都会重新播放用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号