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";
}

这不是我的所有代码，我有更多的艺术家和更多的歌曲但重点是当我点击艺术家名字
时，我希望艺术家的歌曲显示出来我现在用谷歌搜索了一段时间，我发现我必须将span标签显示为内联。

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

Answer 1

编辑：啊，是的，请看另一半问题的其他答案。

这段代码应该可行，我唯一看错的就是这一行：

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

你应该在showSongs调用中使用单引号：

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

如果这不能解决问题，可能是由页面上的其他代码引起的。

Answer 2

首先，调整您要发送的艺术家名称以使用单引号，您使用双引号打破字符串。

<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。

Answer 3

getElementsByClassName返回类似数组的集合。我不认为你可以用这种方式改变风格..也许你可以试试这个：

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

使用jquery会更轻松。

Answer 4

您可以： http://jsfiddle.net/LVRGZ/3/

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

<div id="Eminem" style="display:none;">
    <span id="Eminem - Survival" onclick="playSong('Eminem - Survival');">Survival</span><br/>
    <span id="Another Song" onclick="playSong('Eminem - 2');">Another Song</span><br/>
    <span id="A Third Song" onclick="playSong('Eminem - 3');">A Third Song</span><br/>
</div>

<script>
showSongs=function(id) {
    alert("Showing "+id);
    document.getElementById(id).style.display='';
}
</script>

隐藏和显示特定类的跨度

4 个答案: