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

// 将item数据挂载到left-item上面---left.js

var $target = $(str);

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

//函数initRightList中---right.js

var $target = $(str);

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

//函数renderItems中---shopBar.js

var $row = $(row);

$row.data('itemData',_item);

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

收起

2回答

好帮手慕慕子 2020-03-18 12:24:03

同学你好，对于你的问题解答如下：

right.js中给每条商品上挂载的数据，与shopBar.js中挂载的数据是一样的。示例：在right.js中的单击事件中输出当前商品挂载的数据

在shopBar.js中输出对应的数据。
打印结果如下：
联动时，商品展示区每条商品挂载的记录和购物车中每条挂载的记录都需要发生改变，因为购物车的商品数目发生改变时，展示区的商品数目也要发生变，所以在right.js和showBar.js中都挂载了数据。

同学也可以回顾下课程讲解，加深理解，祝学习愉快~

好帮手慕慕子 2020-03-17 19:10:31

同学你好，对于你的问题解答如下：

首先，我们可以使用console.log在控制台打印下查看这三次挂载的数据都是什么。如下:
然后，我们在来分析其中的逻辑，如下：
（1）left.js中挂载数据，是为了实现在点击左侧选项时，获取到对应的数据，传递给right.js，让其将数据在页面中渲染出来。
（2）right.js中挂载数据，是为了右侧区域点击加减号时，改变对应商品的数量，与购物车中的商品进行联动，改变这里的商品数目，购物车中商品数目，也跟着改变。
（3）shopBar.js中挂载数据，是为了在点击加减号时，购物车中每条商品与商品展示区的商品数目进行联动，实现购物车中的数量发生改变，商品展示区的商品数目也发生改变。

同学可以试着理解下，祝学习愉快~

提问者迷失的小麦 #1

针对第二条和第三条的购物车中每条商品与商品展示区的商品数目进行联动有点不太理解。我的理解：当商品展示区的商品数目进行变动时（right.js），将数据挂载在当前商品上并记录变化，即var itemData = $item.data('itemData');itemData.chooseCount = itemData.chooseCount + 1;，同时购物车中每条商品进行联动。重点是联动时记录的数据为什么记录在了购物车的商品上（var $row = $(row);$row.data('itemData',_item);）而不是商品展示区的商品上？（我认为分开记录没有意义，应该是记录在同一个元素上，当某一个变化时，改变元素上的数据，同时另一个根据该元素上的数据进行联动）另，为什么right.js中挂载的数据和shopBar.js中挂载的数据为什么不一样？（什么需求）

2020-03-18 09:13:13