我會切入正題，我仍然是 javascript 的初學者，我無法使用“for 回圈”將 JSON 檔案中的一些資料關聯到特定的 HTML 元素，因此我可以將樣式應用于它們。
這是我的 HTML：
<button onclick="yearMap(2004)">See songs</button>
<div class="yearmap-1">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</div>
我的javascript如下：
async function yearMap(year) {
const api_url = 'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year' year;
const response = await fetch(api_url);
const data = await response.json();
for (let i = 0; i < 52; i ) {
const { no1genre } = data[i];
document.querySelector('.yearmap-1 li:nth-child(' i ')').style.backgroundColor = no1genre;
console.log(i)
console.log(no1genre)
}
}
當您單擊按鈕時，每個<li>元素應該按時間順序從 JSON 檔案中的資料列（十六進制代碼）中的每個實體按時間順序設定樣式（bg-color）。有幾行資料和 HTML 元素，所以我認為使用帶有:nth-child選擇器的 for 回圈是最好的方法，但我不斷收到以下錯誤：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style') at yearMap
當我用數字替換第 n 個子選擇器中的“i”時，它會很好地改變參考<li>元素的樣式（使用 JSON 檔案中的最后一個實體no1genre）。
此外，console.log(i)并console.log(no1genre)證明回圈中的每個數字和 JSON 檔案中的十六進制代碼可以一起參考，但我無法將它們應用于每個<li>元素。我懷疑這:nth-child不是解決方法，但我不確定還有什么可以嘗試的？
提前感謝您的幫助！
uj5u.com熱心網友回復：
nth-child我將迭代元素串列并相應地分配值，而不是使用which 可能實際上匹配或可能不匹配元素
document.querySelectorAll(".yearmap-1 li").forEach((li, i) => {
li.style.backgroundColor = data[i]?.no1genre ?? ""; // or suitable fallback
});
uj5u.com熱心網友回復：
我認為對于您的情況，最好的方法是在 for 回圈中創建新<li>元素并將它們附加到正確的位置，而不是擁有固定數量的<li>元素并更改它們的屬性。
您可能想查看createElement和appendChild。
uj5u.com熱心網友回復：
您可以使用 eq(); 函式來指定父類 yearmap-1 中每個 li 的索引，然后你可以應用
uj5u.com熱心網友回復：
作業代碼
html:
<button onclick="yearMap(2004)">See songs</button>
<div class="yearmap-1"></div>
Javascript：
async function yearMap(year) {
const api_url =
'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year'
year;
const response = await fetch(api_url);
const data = await response.json();
for (let i = 0; i < 52; i ) {
const { no1genre } = data[i];
console.log(no1genre)
const li = document.createElement("li");
li.style.backgroundColor = no1genre;
document.getElementsByClassName('yearmap-1')[0].appendChild(li);
}
}
uj5u.com熱心網友回復：
您的代碼的問題是您正在運行的回圈。您的回圈從 0 開始，因此選擇器陳述句變為
document.querySelector('.yearmap-1 li:nth-child('0')').style.backgroundColor = no1genre;
并且由于它試圖使用第 n 個子選擇器獲取第 0 個元素，這是不可能的（因為第一個 li 元素將是第一個子元素而不是第 0 個子元素）。所以要么你應該更新你的回圈從 1 開始，或者你應該使用：
document.querySelectorAll('.yearmap-1 li')[i].style.backgroundColor = no1genre;
在你的 for 回圈中。document.querySelectorAll('.yearmap-1 li') 會將所有 li 專案作為陣列提供，然后您可以遍歷它們以獲得所需的 li 元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/451709.html
標籤：javascript jQuery json for循环 css 选择器
上一篇：用c寫一個for回圈
下一篇：sqlsrv_fetch_array($stmt,SQLSRV_FETCH_ASSOC)回傳除空記錄之外的所有記錄