使用Javascript更改id的顏色

我從 Firebase 獲取所有電影資料，并獲得電影評分。如果電影的分數高于70，那么我將id的顏色更改為“deepskyblue”，如果為50或更高，則為“orange”，最后如果低于50，則為“crimson” （紅色的）。當我這樣做時，它只會改變我第一部電影的 id 顏色。但我想改變所有這些。我怎樣才能做到這一點？

我的網站

控制臺日志(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 ><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i  id="star"></i>&nbsp;<a >${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>

uj5u.com熱心網友回復：

我建議改變邏輯。你的錯誤是你多次使用相同的 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 代碼。

uj5u.com熱心網友回復：

做一個函式

注意 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 >
    <img src="${img}" >
    <p><a href="Admin.html?movieId=${id}">${name}</a></p>
    <p><i ></i>&nbsp;<a hljs-subst">${scoreColor(score)}">${score}</a></p> 
    </div>`;
  body.innerHTML  = movies;
  body2.innerHTML  = movies;

}

標籤：javascript html 火力基地

上一篇：使用firestore的FlutterBookstore應用資料庫

下一篇：多表搜索，帶限制條款和已知結果源表名稱