我從 Firebase 獲取所有電影資料，并獲得電影評分。如果電影的分數高于 70，那么我將類的顏色更改為“deepskyblue”，如果為 50 或更高，則為“橙色”，最后如果低于 50，則為“深紅色” （紅色的）。當我這樣做時，它只會改變我第一部電影的類的顏色。但我想改變所有這些。我怎樣才能做到這一點？
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> <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>我的網站
控制臺日志(i)
uj5u.com熱心網友回復：
您可以給它一個唯一的 id，而不是選擇具有類名的元素。對于 thi標簽，您可以給出 id 例如id="star${id}"
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${id}"></i> <a >${score}</a> </p> </div>`;
html = movies;
body.innerHTML = html;
body2.innerHTML = html;
}
AddItemsToTable(element.movieName, element.movieScore, element.movieImage,
element.movieId);
var i = document.getElementById("#star" element.movieId);
uj5u.com熱心網友回復：
你可以使用 style="color:"desired color name/hexcode" 最簡單的方法來改變顏色
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/394274.html
標籤：javascript html 火力基地