我想使用 forEach 方法更改歌曲名称，但它不会更改，也不会显示任何错误

Question

我想执行基本操作，例如更新文档数组。在此 html 中，我有包含歌曲项目 class 的歌曲列表（歌曲容器）。我想更改每首歌曲的名称，我尝试了以下代码，但没有收到想要的输出。

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>

Answer 1

querySelector returns 匹配选择器的第一个元素。使用 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;
});

Answer 2

如前面的答案所述，这一行

let songItem = Array.from(document.querySelector(".songItem"));

return 仅第一个具有 class 名称的元素 "songItem"。为了 return 所有这些，您需要使用 querySelectorAll。此外，您不必使用 Array.from()。因此，您可以改用这一行：

let songItem = document.querySelectorAll(".songItem");

另一方面，在最后一行中，使用 element.getElementsByClassName("songName")[0] 可能不是最佳做法，因为“element”只有一个子元素 class 名称为“songName”，您可以在这种情况下使用 querySelector；像这样：

element.querySelector(".songName").innerText = songs[i].Name;

我想使用 forEach 方法更改歌曲名称，但它不会更改，也不会显示任何错误

I want to change song name by using forEach method but it doesn't change and doesn't show any error

html

javascript

arrays

foreach