Скрыть и показать пролеты с определенным классом

Question

Скрыть и показать пролеты с определенным классом

0

Я пытаюсь отображать песни, сделанные художником, когда я нажимаю имя исполнителя.
Здесь мой 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 как встроенные.

Если вам нужна дополнительная информация, просто спросите, и я отредактирую сообщение

robin00212 03 янв. 2014, в 23:27

Источник

0

Я думаю, что вы должны изменить inline на inline-block
Alireza Ahmadi 03 янв. 2014, в 22:27
0

Это не сработало
robin00212 03 янв. 2014, в 22:28

Теги:

javascript

html

dom

4 ответа

1

EDIT: Ах да, см. Другие ответы на другую половину проблемы.

Этот код должен работать, единственное, что я вижу с ним, - это эта строка:

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

Вы должны использовать одинарные кавычки внутри вызова showSongs:

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

Если это не решит проблему, это, вероятно, вызвано каким-то другим кодом на странице.

Alexander O'Mara 03 янв. 2014, в 21:16

0

Не работает само по себе, пришлось настроить javascript для того, что @ Goose awnsered
robin00212 03 янв. 2014, в 22:34

0

getElementsByClassName возвращает массивную коллекцию. Я не думаю, что вы можете изменить стиль таким образом. Возможно, вы могли бы попробовать это:

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

С jquery будет намного проще.

Jonathan Fleury 03 янв. 2014, в 20:26

0

Здесь вы найдете: 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>

gfrobenius 03 янв. 2014, в 19:39

Ещё вопросы

Я думаю, что вы должны изменить inline на inline-block
Не работает само по себе, пришлось настроить javascript для того, что @ Goose awnsered

Goose · Accepted Answer · 2014-01-03T20-28-00.000Z

Во-первых, отрегулируйте имя исполнителя, которое вы отправляете, чтобы использовать одинарные кавычки, вы разбиваете строку, используя двойные кавычки.

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

Спасибо, это исправило проблему для меня :)
Рад, что у вас получилось, не забудьте пометить как ответ, если это помогло :)