javascript - 隐藏和显示特定类的跨度

Question

当我单击艺术家的名字时，我正在尝试显示该艺术家创作的歌曲。
这是我的 HTML

<div id="artists">
<span class="artist" id="Eminem" onclick="showSongs("Eminem")">Eminem</span>
</div>

<div id="songs">
<span style="display:none;" class="Eminem" id="Eminem - Survival" onclick="playSong('Eminem - Survival');">Survival</span>
</div>

这是我的 Javascript

function showSongs(artist) {
document.getElementsByClassName(artist).styles.display="inline";
}

这不是我的全部代码，我还有更多艺术家和更多歌曲。
但重点是我希望当我单击艺术家姓名时显示艺术家的歌曲

我已经用谷歌搜索了一段时间，我发现我必须将跨度标签显示为内联。

如果您需要更多信息，请询问，我将编辑帖子

Answer 1

首先，调整您要发送的艺术家姓名以使用单引号，您将使用双引号来中断字符串。

<span class="artist" id="Eminem" onclick="showSongs('Eminem')">Eminem</span>

然后，当您通过类名获取元素时，您正在检索一个集合并需要循环遍历它们。如下图所示:

function showSongs(artist) {
  var elements = document.getElementsByClassName(artist);
  for(var i = 0; i < elements.length; i++) {
      elements[i].style.display="inline";
  }
}

这是一个jsFiddle .