使用 Javascript 更改 id 的颜色

Question

我从 Firebase 获取所有电影数据，还获得了电影的分数。如果电影的分数高于 70，那么我将 id 的颜色更改为“deepskyblue”，如果它是 50 或更高将是“橙色”，最后如果它低于 50 将是“深红色” （红色的）。当我这样做时，它只会改变我第一部电影的 id 的颜色。但我想改变所有这些。我该怎么做？

我的网站

Console.log(i)

var movieNo = 0;
let html = '';
var body = document.getElementById('editor');
var body2 = document.getElementById('week');

function AddItemsToTable(name, score, img, id) {
  var movies = `<div class="content"><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star" id="star"></i>&nbsp;<a class="scoretxt">${score}</a> </p> </div>`;
  html = movies;

  body.innerHTML += html;
  body2.innerHTML += html;

}


function AddAllItemsToTable(TheMovies) {
  movieNo = 0;
  var counter = 0;

  TheMovies.forEach(element => {
    if (counter === 6) {
      return;
    }
    AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
    var i = document.getElementsByClassName("fa fa-star")[element.movieId];
    console.log(i);
    if (element.movieScore >= 70) {
      i.style.color = "deepskyblue"; //good movie

    } else if (element.movieScore >= 50) {
      i.style.color = "orange"; //not bad
    } else {
      i.style.color = "crimson"; //bad movie
    }

    counter++;

  });

}

function getAllDataOnce() {
  const dbRef = ref(db);
  get(child(dbRef, "Movies"))
    .then((snapshot) => {
      var movies = [];
      snapshot.forEach(childSnapshot => {
        movies.push(childSnapshot.val())
      });
      AddAllItemsToTable(movies);
    });
}
window.onload = getAllDataOnce;

<div class="body" id="body">

  <div class="baslik">Opening This Week</div>
  <div class="baslik2"><a href="series.html">See all</a></div>
  <div id="week">

  </div>
  <div class="baslik">Editor's Picks</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>
  <div id="editor">

  </div>


</div>

Answer 1

我建议改变逻辑。 您的错误是您多次使用相同的 id，并且它应该是唯一的（1 个元素 = 1 个唯一 id）。

试着把它变成这样：

// AddAllItemsToTable function

if (element.movieScore >= 50 && element.movieScore < 70 ) {
    i.classList.add("deepskyblue"); // good movie
} else if (element.movieScore >= 70) {
    i.classList.add("orange"); // not bad
} else {
    i.classList.add("crimson"); // bad movie
}

之后，将以下规则添加到您的样式文件中：

.deepskyblue {
    color: deepskyblue;
}

.orange {
    color: orange;
}

.crimson {
    color: crimson;
}

一切都将按应有的方式工作，并且作为奖励，管理样式会更容易，而且您不必为此修复 JS 代码。

Answer 2

制作函数

注意 ID 必须是唯一的

const scoreColor = score => {
  const color =  "crimson"
  if (score >= 70) return "deepskyblue"; //good movie
  if (score >= 50) return "orange"; //not bad
  return score;
};

function AddItemsToTable(name, score, img, id) {
  const movies = `<div class="content">
    <img src="${img}" >
    <p><a href="Admin.html?movieId=${id}">${name}</a></p>
    <p><i class="fa fa-star"></i>&nbsp;<a class="${scoreColor(score)}">${score}</a></p> 
    </div>`;
  body.innerHTML += movies;
  body2.innerHTML += movies;

}