javascript - 创建 10 个 div，但仅根据 api 的值向其中一些添加颜色

Question

我正在尝试创建 10 个 div，但如果它们在数字 0-10 的值范围内，则仅添加“绿色”类。

假设评级是 6。这意味着只有这 6 个是绿色的，而剩下的 4 个是灰色的。

我尝试过使用 for 循环和 if 语句。但是除了创建 6 个绿色 div 之外，什么都没有发生。

我的代码远非完美，但在这里。

  let rating = 6;
  let stars = document.querySelector(".total-rating");

  for (let i = 0; i < rating; i++) {
    if (i <= rating) {
      let star = document.createElement("div");
      star.className = "star green";
      stars.appendChild(star);
    }
  }

标签： javascript

Answer 1

如果你想要 10 颗星，循环 10 次。然后只需将“绿色”添加到前 6 个。

  let rating = 6;
  let stars = document.querySelector(".total-rating");

  for (let i = 0; i < 10; i++) {
      let star = document.createElement("div");
      star.className = "star" + (i <= rating ? " green" : "");
      stars.appendChild(star);
  }