type
status
date
slug
summary
tags
category
icon
password

结构

js

🤗 总结归纳

这段代码的主要功能是处理产品颜色选择的交互:
  • initColorSkuBox 函数:
  • 为颜色选择框添加点击和触摸事件监听器。
  • 当用户选择一个颜色时:
a. 阻止默认行为和事件冒泡。b. 获取选中颜色对应的图片URL、销售价格和市场价格。c. 更新产品主图:
  • 使用 Utils.runByDevice 根据设备类型(PC或移动设备)选择合适的图片URL。
  • 更新图片的 src 和 data-src 属性。
d. 更新价格显示:
  • 更新折扣价和原价。
e. 更新选中状态:
  • 给选中的颜色添加 active 类,移除其他颜色的 active 类。
  • 页面加载完成后立即调用 initColorSkuBox() 初始化颜色选择功能。
  • 监听窗口大小变化事件:
  • 当窗口大小改变时,重新调用 initColorSkuBox() 函数。
  • 这可能是为了确保在设备方向改变或浏览器窗口调整大小时,颜色选择功能仍能正常工作。
这段代码实现了一个动态的颜色选择功能,允许用户在不刷新页面的情况下查看不同颜色的产品图片和价格,提高了用户体验和交互性。