点击add类按钮将products数组对应商品推入cart并更新购物车数量的实现问题

原代码存在的问题 #

• document.getElementsByClassName("add")返回的是类数组的DOM集合，无法直接给整个集合绑定点击事件，需要遍历每个按钮单独绑定监听
• 点击事件的回调函数不需要传products和cart作为形参，会覆盖全局定义的两个数组变量
• 商品数组products中冰球杆的Id属性写错为Titan_d，和HTML里的按钮idTitan_e不匹配，同时和蓝衬衫的Id重复
• 变量名冲突：代码中获取购物车数量元素赋值给了camount变量，后续却错误使用未定义的cartamnt变量操作DOM
• 无法正确获取点击按钮的id：原代码用addtocart.Id获取id的写法错误，应该通过点击事件的触发对象this获取当前按钮的id属性
• 商品匹配逻辑错误：遍历商品数组时没有取下标对应的商品属性，匹配判断逻辑错误
• 购物车数量统计错误：不应该用遍历的下标i作为数量，直接取购物车数组cart的长度即可

修正后完整JS代码 #

// 商品数组，修正冰球杆的Id为Titan_e和HTML对应
var products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_e"
  }
];

var cart = [];

// 购物车数量元素
var cartAmount = document.getElementById("cartamnt");
cartAmount.innerText = "0 cart";

// 获取所有加入购物车按钮，遍历绑定点击事件
var addBtns = document.getElementsByClassName("add");
for (var i = 0; i < addBtns.length; i++) {
  addBtns[i].onclick = function() {
    // 获取当前点击按钮的id
    var currentBtnId = this.id;
    // 遍历商品数组找匹配的商品
    for (var j = 0; j < products.length; j++) {
      if (currentBtnId === products[j].Id) {
        // 将匹配到的完整商品对象加入购物车
        cart.push(products[j]);
        // 更新购物车数量显示
        cartAmount.innerText = cart.length + " cart";
        // 匹配到就跳出循环，不需要继续遍历
        break;
      }
    }
  }
}

可选优化 #

如果需要避免同一个商品被重复加入购物车，可以在push前加判断，检查cart数组中是否已经存在Id和当前按钮id一致的商品即可。

内容的提问来源于stack exchange，提问作者Alex