Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как показывать/скрывать элементы с одинаковым div? 
:(
    Опции темы
Sice
  Дата 13.11.2017, 00:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Радио Онлайн
*


Профиль
Группа: Участник
Сообщений: 62
Регистрация: 4.12.2007

Репутация: нет
Всего: 0



Добрый день, друзья. Хочу показывать/скрывать элементы с одинаковым 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, остальные просто не реагируют, как сделать так, чтобы блоки с одинаковым названием все показывались/скрывались ?
Я так понимаю, что делать это нужно с классами, можете пожалуйста подсказать, как переделать код, чтобы элементы с определенным классом скрывались/показывались ?

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

Это сообщение отредактировал(а) Sice - 13.11.2017, 01:04
PM MAIL WWW   Вверх
whatisnot
Дата 13.11.2017, 01:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: нет
Всего: 2



Цитата(Sice @  13.11.2017,  00:12 Найти цитируемый пост)
То есть у меня порядка 50 блоков с id=div_name


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

PM MAIL   Вверх
Sice
Дата 13.11.2017, 01:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Радио Онлайн
*


Профиль
Группа: Участник
Сообщений: 62
Регистрация: 4.12.2007

Репутация: нет
Всего: 0



Цитата(whatisnot @ 13.11.2017,  01:26)
Цитата(Sice @  13.11.2017,  00:12 Найти цитируемый пост)
То есть у меня порядка 50 блоков с id=div_name


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

Подскажите пожалуйста на моём примере как это сделать с классами. Буду Вам очень благодарен. Пожалуйста.
PM MAIL WWW   Вверх
whatisnot
Дата 13.11.2017, 02:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 130
Регистрация: 14.12.2014

Репутация: нет
Всего: 2



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

Код

.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, если есть проблемы с браузерами. 

Это сообщение отредактировал(а) whatisnot - 13.11.2017, 02:21
PM MAIL   Вверх
Sice
Дата 13.11.2017, 10:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Радио Онлайн
*


Профиль
Группа: Участник
Сообщений: 62
Регистрация: 4.12.2007

Репутация: нет
Всего: 0



Цитата(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, если есть проблемы с браузерами.

Спасибо Вам большое !
PM MAIL WWW   Вверх
_zorn_
Дата 15.11.2017, 18:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12



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

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

PS. И да, jQuery уже не в моде  smile  А на "чистом" пишут извращенцы  smile 
npm, babel и вот это вот все...

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

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

Это сообщение отредактировал(а) _zorn_ - 15.11.2017, 19:18
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1106 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.