我創建了一個類似于 spotify 的音樂串列動態是 javascript，我試圖在所有行中添加持續時間，但問題是持續時間僅適用于第一行。并且控制臺沒有顯示任何錯誤。我試過但不知道有什么問題。
// Creating Music List
const tbody = document.querySelector("tbody");
// let create tr tags according to array length for list
for (let i = 0; i < songs.length; i ) {
//let's pass the song details from the array
let trTag = `<tr tr-index = ${i}>
<td width="5%">${songs[i].nmbr}</td>
<td width="80%">
<div>
<img src=${songs[i].coverPath} >
</div>
<div >
<h3>${songs[i].trackName}</h3>
<h4>${songs[i].trackArtist}</h4>
</div>
</td>
<td width="30%">
<h4>${songs[i].trackAlbum}</h4>
</td>
<td width="15%">${songs[i].date}</td>
<td width="5%">
<img src="/assets/asset 72.svg" alt="持續時間不適用于所有行">
</td>
<td width="12%" >0:00</td>
</tr> `;
tbody.insertAdjacentHTML("beforeend", trTag); //inserting the tr inside tbody tag
let trAudioDuration = tbody.querySelector(".audio_duration");
let trAudioTag = new Audio(`audio/1.mp3`);
trAudioTag.addEventListener("loadeddata", () => {
let aDuration = trAudioTag.duration;
let totalMin = parseInt(aDuration / 60);
let totalSec = parseInt(aDuration % 60);
if (totalSec < 10) {
totalSec = `0${totalSec}`;
};
trAudioDuration.innerHTML = `${totalMin}:${totalSec}`; //passing total duration of song
});
};
uj5u.com熱心網友回復：
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊這是經典 問題在于：
let trAudioDuration = tbody.querySelector(".audio_duration");
請參閱，querySelector特別是在使用類選擇器時，僅回傳第一個匹配的元素。我們需要在querySelectorAll這里使用，它回傳所有匹配的元素。
由于querySelectorAll回傳一個包含多個元素的陣列，我們還需要稍微不同地處理 innerHTML 設定，因此我們使用forEach遍歷所有匹配的元素并在每個元素上設定 innerHTML。
這是一個演示問題和解決方案的片段：
function problem() {
let tag = document.querySelector(".duration");
tag.innerHTML = "1:53";
}
function solution() {
let tags = document.querySelectorAll(".duration2");
tags.forEach((tag) => {
tag.innerHTML = "8:41";
});
}
function secure_solution() {
let tags = document.querySelectorAll(".duration3");
tags.forEach((tag) => {
tag.textContent = "8:41";
});
}
problem();
solution();
secure_solution();<p>Problematic table</p>
<table id = "tbl">
<tr><td class = "duration">0:00</td></tr>
<tr><td class = "duration">0:00</td></tr>
<tr><td class = "duration">0:00</td></tr>
<tr><td class = "duration">0:00</td></tr>
<tr><td class = "duration">0:00</td></tr>
<tr><td class = "duration">0:00</td></tr>
</table>
<p>Working table</p>
<table id = "tbl2">
<tr><td class = "duration2">0:00</td></tr>
<tr><td class = "duration2">0:00</td></tr>
<tr><td class = "duration2">0:00</td></tr>
<tr><td class = "duration2">0:00</td></tr>
<tr><td class = "duration2">0:00</td></tr>
<tr><td class = "duration2">0:00</td></tr>
</table>
<p>Secure table</p>
<table id = "tbl3">
<tr><td class = "duration3">0:00</td></tr>
<tr><td class = "duration3">0:00</td></tr>
<tr><td class = "duration3">0:00</td></tr>
<tr><td class = "duration3">0:00</td></tr>
<tr><td class = "duration3">0:00</td></tr>
<tr><td class = "duration3">0:00</td></tr>
</table>在一個重要的方面，您不應該使用 innerHTML 將持續時間寫入元素。您的持續時間只是文本并且包含零 html，因此最好使用類似的東西textContent。這確保了某些惡意方沒有機會通過以某種方式將持續時間資料替換為 HTML （如<script>alert("hax")</script>. 請注意我實際上是如何在那里撰寫 HTML 的，但 StackOverflow 已經考慮到這一點，您的瀏覽器實際上不會為您彈出警告框，而只會將其顯示為文本。如果您確實需要使用innerHTML，請記住先對其進行消毒。
uj5u.com熱心網友回復：
您的問題是因為您的選擇器.audio_duration正在搜索tbody所有.audio_duration元素的位置。
一種解決方案是獲取tr您插入的 并在其上執行選擇器，然后它將.audio_duration在tr而不是tbody.
let tr = tbody.lastElementChild;
let trAudioDuration = tr.querySelector(".audio_duration");
uj5u.com熱心網友回復：
正如@Swiffy 在他的回答問題中所解釋的那樣，tbody.querySelector(".audio_duration");因為它會.audio_duration從tbody.
您可以像下面那樣更新該查詢選擇器，它應該可以正常作業。
let trAudioDuration = tbody.querySelector(`tr[tr-index='${i}'] .audio_duration`);
上面的選擇器將嘗試.audio_duration在tr其中找到tr-index由 指定的值i。
參考 ：
- https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497306.html
標籤：javascript
下一篇：命令執行問題