购物车中咖啡豆按strength属性灰显功能异常问题排查

1. 全局DOM选择导致索引错位
   document.getElementsByClassName('bean')会获取页面上所有类名为bean的元素，当购物车中有多款咖啡时，每个咖啡对应5个bean，全局索引是连续累加的（比如第1款咖啡的bean索引是0-4，第2款是5-9）。但你的代码中直接用i或k作为索引去操作，只会修改全局前5个bean，完全无法对应到当前购物车项的豆子，导致多咖啡时显示混乱。

2. 重复生成咖啡豆
   生成豆子的代码使用innerHTML +=，每次更新购物车都会在原有豆子基础上追加新的5个，导致bean数量远超预期，进一步加剧透明度设置的错误。

3. 逻辑冗余且错误
   设置透明度的内层循环重复执行（遍历strength次），每次都重复设置灰显豆子，而且if (j <= this.shoppingCard.list[i].strength)的判断完全多余，还会导致不必要的重复操作。

方案一：生成豆子时直接设置透明度（推荐） #

一次性完成豆子创建和透明度设置，避免后续额外循环，同时清空容器防止重复添加：

// 购物车更新方法：生成并设置咖啡豆
updateShoppingCartBeans() {
  for (let i = 0; i < this.shoppingCard.list.length; i++) {
    const beansContainer = document.getElementsByClassName('beans')[i];
    // 先清空容器，避免重复添加豆子
    beansContainer.innerHTML = '';
    const currentCoffee = this.shoppingCard.list[i];
    
    for (let j = 0; j < 5; j++) {
      // 创建bean元素
      const beanImg = document.createElement('img');
      beanImg.className = 'bean';
      beanImg.src = '../pics/bean.png';
      // 直接根据序号设置透明度：j < strength则完全显示，否则灰显
      beanImg.style.opacity = j < currentCoffee.strength ? '1' : '0.3';
      beansContainer.appendChild(beanImg);
    }
  }
}

方案二：分开生成和设置透明度 #

如果需要分开逻辑，确保只操作当前购物车项内的bean元素：

// 1. 生成咖啡豆（先清空容器）
generateBeans() {
  for (let i = 0; i < this.shoppingCard.list.length; i++) {
    const beansContainer = document.getElementsByClassName('beans')[i];
    beansContainer.innerHTML = '';
    for (let j = 0; j < 5; j++) {
      beansContainer.innerHTML += `<img class="bean" src="../pics/bean.png">`;
    }
  }
}

// 2. 设置透明度
setBeansOpacity() {
  for (let i = 0; i < this.shoppingCard.list.length; i++) {
    const beansContainer = document.getElementsByClassName('beans')[i];
    // 只获取当前容器内的bean元素，而非全局
    const beans = beansContainer.getElementsByClassName('bean');
    const strength = this.shoppingCard.list[i].strength;
    
    for (let j = 0; j < 5; j++) {
      beans[j].style.opacity = j < strength ? '1' : '0.3';
    }
  }
}

// 调用时先生成再设置
this.generateBeans();
this.setBeansOpacity();

额外优化点 #

• 给CoffeeMachine类的addToCart方法添加更新购物车UI的逻辑，每次添加后自动调用上述更新方法。
• 可以用querySelectorAll替代getElementsByClassName，获取元素更灵活，比如document.querySelectorAll('.beans')[i]。

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