Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Открыть/закрыть для всех блоков с одинаковым ID (https://javascript.ru/forum/misc/45531-otkryt-zakryt-dlya-vsekh-blokov-s-odinakovym-id.html)

FaustL 04.03.2014 19:45
Открыть/закрыть для всех блоков с одинаковым ID
 
Как сделать так, чтобы этот код заработал на всех ID?
#storyimg{display: none;}
<a class="yr" onclick="document.getElementById('storyimg').style.display=document.getElementById('storyimg').style.display=='block'?'none':'block';return(false)">Показать картинки</a>
<div id="storyimg">
  <img src="...">
</div>
<div id="storyimg">
  <img src="...">
</div>
<div id="storyimg">
  <img src="...">
</div>

Суть такая, на сайте есть статья с картинками, но иногда картинки просто мешают, хочется один текст. Для этого и использовал код выше. Он изначально скрывает картинку, которая находятся в div'е с id storyimg. А мне нужно чтобы он скрывал все имеющиеся дивы с id storyimg.

animhotep 04.03.2014 19:47
дивов с id не может быть больше одного на странице, вместо id используй class

FaustL 04.03.2014 19:56
Цитата:
Сообщение от animhotep (Сообщение 300980)
дивов с id не может быть больше одного на странице, вместо id используй class
В итоге данный код перестаёт работать. Я заменил на:
.storyimg{display: none;}
<a class="yr" onclick="document.getElementById('.storyimg').style.display=document.getElementById('.storyimg').style.display=='block'?'none':'block';return(false)">Показать картинки</a>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>

Подозреваю, что getElementById надо заменить на что-то другое?

animhotep 04.03.2014 19:58
именно, на getelementsbyclassname

FaustL 04.03.2014 20:06
Цитата:
Сообщение от animhotep (Сообщение 300986)
именно, на getelementsbyclassname
Не работает(
изменял на getElementsByClassName, так пробовал как ".storyimg", так "storyimg"

рони 04.03.2014 21:17
FaustL,
циклом по всему массиву getElementsByClassName

FaustL 04.03.2014 21:18
Цитата:
Сообщение от рони (Сообщение 301013)
FaustL,
циклом по всему массиву getElementsByClassName
Вот так у меня:
.storyimg{display: none;}
<a class="yr" onclick="document.getElementsByClassName('.storyimg').style.display=document.getElementsByClassName('.storyimg').style.display=='block'?'none':'block';return(false)">Показать картинки</a>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>


Где неправильно подскажите пожалуйста

рони 04.03.2014 21:29
FaustL,
создайте функцию и обработайте массив - нет у массива style

FaustL 04.03.2014 21:33
Цитата:
Сообщение от рони (Сообщение 301020)
FaustL,
создайте функцию и обработайте массив - нет у массива style
Прошу помогите в этом вопросе, я не силён в js.

рони 04.03.2014 21:42
FaustL,
:( 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .storyimg{display: none;}
  </style>
  <script>
      var show;
     function toggle(cls)
     {
       show = !show
       var divs = document.getElementsByClassName(cls);
       for (var i=0; i<divs.length; i++)  {divs[i].style.display= show ? 'block':'none'}

     }
  </script>
</head>

<body>

<a class="yr" onclick="toggle('storyimg');return(false)">Показать картинки</a>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>

</body>

</html>


Часовой пояс GMT +3, время: 09:17.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице