Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Как показывать/скрывать элементы с одинаковым div?

Автор: Sice 13.11.2017, 00:12

Добрый день, друзья. Хочу показывать/скрывать элементы с одинаковым id div. То есть у меня порядка 50 блоков с id=div_name. Хочу, чтобы по ссылке они все скрывались и все показывались. Делаю так:

Код


<div id="div1" style="display:none;">Скрытый текст</div>
<a href="javascript:onoff('div1');">показать/скрыть</a>

Код


function onoff(t){
  p=document.getElementById(t);
  if(p.style.display=="none"){
    p.style.display="block";}
  else{
    p.style.display="none";}
}

Но так скрывается/показывается только первый блок div, остальные просто не реагируют, как сделать так, чтобы блоки с одинаковым названием все показывались/скрывались ?
Я так понимаю, что делать это нужно с классами, можете пожалуйста подсказать, как переделать код, чтобы элементы с определенным классом скрывались/показывались ?

Заранее большое спасибо.

Автор: whatisnot 13.11.2017, 01:26

Цитата(Sice @ 13.11.2017, 00:12

)

То есть у меня порядка 50 блоков с id=div_name

Не получится, id должен быть уникальным, в противном случае при обращении к ним возвращаться будет первый найденный. Обращаться можно и по имени класса.

Автор: Sice 13.11.2017, 01:29

Цитата(whatisnot @ 13.11.2017, 01:26)

Цитата(Sice @ 13.11.2017, 00:12

)

То есть у меня порядка 50 блоков с id=div_name

Подскажите пожалуйста на моём примере как это сделать с классами. Буду Вам очень благодарен. Пожалуйста.

Автор: whatisnot 13.11.2017, 02:00

Для современных браузеров можно так:

Код


.box {
    display: none;
}

Код


function control() {
    [].forEach.call(document.querySelectorAll('.box'), function(e) {
        e.style.display = e.style.display=='none' ? 'block' : 'none'
    })
}

Код


<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<a onclick="control()">показать/скрыть</a>

Коллекцию элементов document.querySelectorAll('.box') можно обойти и просто циклом for, если есть проблемы с браузерами.

Автор: Sice 13.11.2017, 10:36

Цитата(whatisnot @ 13.11.2017, 02:00)

Для современных браузеров можно так:

Код


.box {
    display: none;
}

Код


function control() {
    [].forEach.call(document.querySelectorAll('.box'), function(e) {
        e.style.display = e.style.display=='none' ? 'block' : 'none'
    })
}

Код


<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<div class="box">Скрытый текст</div>
<a onclick="control()">показать/скрыть</a>

Коллекцию элементов document.querySelectorAll('.box') можно обойти и просто циклом for, если есть проблемы с браузерами.

Спасибо Вам большое !

Автор: _zorn_ 15.11.2017, 18:57

Ответ на опрос - давай им разные id, class или люой аттрибут за который можно зацепиться.. Потом простым способом заберешь нужное тебе занчение.

НО!!!
Яваскрипт компания пока только устуканивается. Так что ОСОБЫХ стандартов нет. Но впри желание можешь найти best practice...
Только актуальный читай ОБЯЗАТЕЛЬНО. А то там много в прошлом могли посоветовать smile

PS. И да, jQuery уже не в моде smile

А на "чистом" пишут извращенцы smile

npm, babel и вот это вот все...

PPS. не думайте что вы умнее и "я на жквери бы это в 2 строчки сделал". Кто так говорит обычно забывает про АСИНХРОННОСТЬ яваскрипта. Она забавная. Пока тебе не придется чинить баг smile

. А чтобы его починить - надо разобраться.
А ассинхронность тебе в этом "ПОМОГАЕТ".
Короче в итоге ты не можешь понять ГДЕ, КОГДА и ПОЧЕМУ конкретный участок кода выполнился.
ЧТО, ГДЕ КОГДА короче smile

И черный ящик....

Поэтому новоиспеченные одепты яваскрипта - следуйте СОВРЕМЕННЫМ гайдам.