JS 内容生成问题

Question

简介（种类：））

首先，我为一份咖啡生成 5个咖啡豆。 咖啡 class 具有属性强度，我想将> 强度的咖啡豆变灰（如下图所示）。

我的 CoffeeMachine Class（简化版）：

class CoffeeMachine {
    constructor() {
        this.name = ""
        this.coffeeList = { list: [] }
        this.tokenList = { list: [] }
        this.shoppingCard = { list: [] }
    }
    addCoffe(coffee) {
        this.coffeeList.list.push(coffee)
    }
    addToken(token) {
        this.coffeeList.list.push(token)
    }
    addToCart(item) {
        this.shoppingCard.list.push(item)
    }
}

我的咖啡 Class（简体）：

class Coffee {
    constructor() {
        this.name = ""
        this.price = 0
        this.time = 0.0
        this.imgsrc = ""
        this.strength = 0
        this.sugar = 0
        this.caffeine = 0
        this.values = []
        this.titelArray = ["caffeeine", "sugar", "time", "strength"]
        this.colors = ["#e34444", "#7944e3", "#44e35c", "#e3d044"]
    }
    setValues(name, price, time, strength, imgsrc, sugar, caffeine) {
        this.name = name
        this.price = price
        this.time = time
        this.strength = strength
        this.imgsrc = imgsrc
        this.sugar = sugar
        this.caffeine = caffeine
    }
    setCoffeeValues() {
        this.values = [this.caffeine + "mg", this.sugar + "g", this.time + "s", this.strength + "/5"]
    }

}

咖啡将被推送到咖啡机的购物车列表中，如下所示：

coffeeMachine.shoppingCard.list.push(coffeeMachine.coffeeList.list[index])

启动咖啡

coffeeLatte.setValues("Latte Macchiato", 1.60, 30.0, 3, "../pics/coffeeLatte.png", 18, 75)
        coffeeBlack.setValues("Black Coffee", 1.20, 20.0, 5, "../pics/coffeeBlack.png", 4, 95)
        coffeCappunchino.setValues("Cappuccino", 1.60, 35, 2, "../pics/coffeeCappuchino.png", 12, 64)

咖啡机class（问题）中的更新购物车方法：

这就是我为列表中的每种咖啡生成咖啡豆的方式：

  for (let i = 0; i < this.shoppingCard.list.length; i++) {
            for (let j = 0; j < 5; j++) {
                document.getElementsByClassName('beans')[i].innerHTML += `<img class="bean" src="../pics/bean.png"></img>`
            }
        }

在下面的代码中，我将 <= coffee.strengtha 的不透明度设置为 100%，将其他的不透明度设置为 30%：

for (let i = 0; i < this.shoppingCard.list.length; i++) {
    for (let j = 0; j < this.shoppingCard.list[i].strength; j++) {
        document.getElementsByClassName('bean')[i].style.opacity = "1"
        if (j <= this.shoppingCard.list[i].strength){
            for (let k = this.shoppingCard.list[i].strength; k < 5; k++) {
                document.getElementsByClassName('bean')[k].style.opacity = "0.3"

            }
        }
    }
}  

在购物车中添加一些咖啡后，会发生这种情况：

Answer 1

不确定所有循环的用途，试试这个：

for (let i = 0; i < this.shoppingCard.list.length; i++) {
  let strength = this.shoppingCard.list[i].strength;
  for (let j = 0; j < 5; j++) {
    document.getElementsByClassName('bean')[i * 5 + j].style.opacity = i <= strength ? "1" : "0.3";
  }
}