关于挂载数据

shopBar.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

(function(){
 
    // 顶部模版字符串
    var itemTopTmpl = '<div class="choose-content hide">'+
                          '<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>';
 
 
    var $strBottom = $(itemBottomTmpl);
    var $strTop = $(itemTopTmpl);
 
 
    function changeShippingPrice(str){
        $strBottom.find('.shipping-fee').text(str);
    }
      function changeTotalPrice(str){
        $strBottom.find('.total-price-span').text(str);
    }
 
 
    /**
     * 渲染购物车顶部
     * param 
     */
    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);
              }
          })
 
          // 改变总价
          changeTotalPrice(totalPrice);
 
          // 改变红点个数
          changeDot();
 
      });
 
 
 
    }
 
    /**
     * 渲染数量红点
     * param 
     */
    function changeDot(){
 
       // 先拿到所有的counts
       var $counts = $strTop.find('.count');
 
       var total = 0;
 
 
       // 遍历每个count 相加
       for (var i = 0 ; i < $counts.length ; i++) {
          total += parseInt($($counts[i]).text());
       }
 
       if (total > 0) {
        $('.dot-num').show().text(total)
       } else {
        $('.dot-num').hide();
       }
    }
 
 
    function addClick(){
 
        $('.shop-bar').on('click', '.shop-icon', function(){
            $('.mask').toggle();
            $strTop.toggle();
        });
        $strTop.on('click','.plus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');
 
            $count.text(parseInt($count.text()||'0')+1);
 
            var $item = $(e.currentTarget).parents('.choose-item').first();
 
            var itemData = $item.data('itemData');
 
            itemData.chooseCount = itemData.chooseCount + 1;
 
 
            renderItems();
 
 
            // 找到当前的右侧详情的数据，进行联动
            $('.left-item.active').click();
 
        });
 
        $strTop.on('click','.minus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');
 
 
            if ($count.text() == 0) return;
            $count.text(parseInt($count.text()||'0')-1);
 
            var $item = $(e.currentTarget).parents('.choose-item').first();
 
            var itemData = $item.data('itemData');
 
            itemData.chooseCount = itemData.chooseCount - 1;
 
 
            renderItems();
 
 
            // 找到当前的右侧详情的数据，进行联动
            $('.left-item.active').click();
 
        });
    }
 
 
    function init(data){
      $('.shop-bar').append($strTop);
      $('.shop-bar').append($strBottom);
      addClick();
    }
 
    init();
 
    window.ShopBar = {
        renderItems: renderItems,
        changeShippingPrice:changeShippingPrice
    }
 
 
})();

1.renderItems中的if (_item.chooseCount > 0)判断的是json数据中的chooseCount，跟data添加的数据没有关系，（自始至终修改数量的时候都是在挂载data数据）为什么能添加选中的商品的HTML结构？

2.addClick中的

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

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

itemData.chooseCount = itemData.chooseCount + 1;

只是修改了挂载的数据，并没有调用挂载的数据，请问这样挂载数据为什么能起到联动的效果？

迷失的小麦 2020-03-18

源自：实战：详情页与购物车开发 2-5 详情页-购物车（5）

收起

2回答

好帮手慕粉 2020-03-19 18:41:56

同学你好，老师在第一次回答的时候已经说了哦，视频老师讲了购物车的实现思想，那就是不管哪方的数据的发生变化，只要点击按钮，就会触发重现渲染的函数，调用这个函数：

祝学习愉快~

收起回答

好帮手慕粉 2020-03-18 17:07:34

同学你好，关于同学的问题回答如下:

1、data的数据是来源于json文件的呀，怎么会没有关系呢。我们可以打印出来看下：

这是list：

这是其中一个_item：

2、在下方掉调用了函数，重新渲染了数据：

老师在上节课有讲到思路，https://class.imooc.com/lesson/1015#mid=24478大概在4.50左右。

祝学习愉快~

收起回答

提问者迷失的小麦 #1

关于data挂载数据在本案例中的逻辑，还是不太理解，能不能请老师帮忙捋一捋思路？

2020-03-18 19:13:34
提问者迷失的小麦 #2

当购物车底部进行增加减少数量时，将数据挂载在了choose-item上，问题是哪句代码起到的效果？（效果是同步将右侧数据进行增加减少数量）（貌似要调用choose-item上的chooseCount）反过来同理，就是希望老师从这2个角度讲解下逻辑

2020-03-18 20:19:14