我想做一些基本的操作，比如用檔案陣列更新。在這個 html 中，我有包含歌曲專案類的歌曲串列（歌曲容器）。我想更改每首歌曲的名稱，我嘗試了下面的代碼，但沒有收到想要的輸出。
let songItem = Array.from(document.querySelector(".songItem"));
let songs = [
{
Name: "love you zindagi",
filePath: "audio/song1.mp3",
coverPath: "covers/download.jpg",
},
{
Name: "zara-zara",
filePath: "audio/song5.mp3",
coverPath: "covers/download.jpg",
},
{
Name: "vaaste",
filePath: "audio/song8.mp3",
coverPath: "covers/download.jpg",
},
];
console.log(songs);
songItem.forEach((element, i) => {
console.log(element, i);
element.getElementsByClassName("songName")[0].innerText = songs[i].Name;
});<div class="songList">
<h1>Best Song Collection</h1>
<div class="songItem">
<span class="image">
<img src="covers/download.jpg" />
</span>
<span class="songName">love you zindagi</span>
<span class="timePlay"
><i class="far fa-play-circle" onclick="songPlay ()"></i
></span>
<span class="timeStop"
><i class="far fa-pause-circle" onclick="pauseSong ()"></i
></span>
</div>
<div class="songItem">
<span class="image">
<img src="covers/download.jpg" />
</span>
<span class="songName">love you zindagi</span>
<span class="timePlay"><i class="far fa-play-circle"></i></span>
</div>
<div class="songItem">
<span class="image">
<img src="covers/download.jpg" />
</span>
<span class="songName">love you zindagi</span>
<span class="timePlay"><i class="far fa-play-circle"></i></span>
</div>
</div>uj5u.com熱心網友回復：
querySelector回傳匹配選擇器的第一個元素。使用querySelectorAll代替來獲取所有匹配元素的迭代。
let songItem = Array.from(document.querySelectorAll(".songItem"));
let songs = [
{
Name: "love you zindagi",
filePath: "audio/song1.mp3",
coverPath: "covers/download.jpg",
},
{
Name: "zara-zara",
filePath: "audio/song5.mp3",
coverPath: "covers/download.jpg",
},
{
Name: "vaaste",
filePath: "audio/song8.mp3",
coverPath: "covers/download.jpg",
},
];
console.log(songs);
songItem.forEach((element, i) => {
console.log(element, i);
element.getElementsByClassName("songName")[0].innerText = songs[i].Name;
});
uj5u.com熱心網友回復：
正如前面的答案中提到的，這一行
let songItem = Array.from(document.querySelector(".songItem"));
只回傳類名的第一個元素"songItem"。為了回傳所有這些，您需要使用querySelectorAll. 此外，您不必使用Array.from(). 因此，您可以改用此行：
let songItem = document.querySelectorAll(".songItem");
另一方面，在最后一行中， usingelement.getElementsByClassName("songName")[0]可能不是最佳實踐，因為“element”只有一個類名為“songName”的子元素，在這種情況下您可以使用 querySelector；像這樣：
element.querySelector(".songName").innerText = songs[i].Name;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/399731.html
標籤：javascript html 数组 foreach