JS内容生成问题

Question

导论(类: )

首先，我为一杯咖啡生成5个咖啡豆。咖啡类具有属性强度，我希望灰出咖啡豆，即> strength (如下图所示)。

​

​

My CoffeeMachine类(简化)：

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 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])

Init咖啡

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)

咖啡机类(Prolem)中的更新购物车方法：

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

  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%，其他coffee.strengtha的不透明度设置为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 j = 1; j <= this.shoppingCard.list[i]; j++) {
    for (let k = 0; k < 5; k++) {
        if (k + 1 < this.shoppingCard.list[i].strength) {
            document.getElementsByClassName('bean')[0].children[k].style.opacity = "1"
        } else {
            document.getElementsByClassName('bean')[0].children[k].style.opacity = "0.3"
        }
    }
}

Answer 2

不确定所有循环的目的是什么，请试一试：

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 = j <= strength ? "1" : "0.3";
  }
}