Форум

FaustL · #1 (**permalink**) 04.03.2014, 19:45

Как сделать так, чтобы этот код заработал на всех 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 · #2 (**permalink**) 04.03.2014, 19:47

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

FaustL · #3 (**permalink**) 04.03.2014, 19:56

Сообщение от animhotep

дивов с 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 · #4 (**permalink**) 04.03.2014, 19:58

именно, на getelementsbyclassname

FaustL · #5 (**permalink**) 04.03.2014, 20:06

Сообщение от animhotep

именно, на getelementsbyclassname

Не работает(
изменял на getElementsByClassName, так пробовал как ".storyimg", так "storyimg"

рони · #6 (**permalink**) 04.03.2014, 21:17

FaustL,
циклом по всему массиву getElementsByClassName

FaustL · #7 (**permalink**) 04.03.2014, 21:18

Сообщение от рони

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>

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

рони · #8 (**permalink**) 04.03.2014, 21:29

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

FaustL · #9 (**permalink**) 04.03.2014, 21:33

Сообщение от рони

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

Прошу помогите в этом вопросе, я не силён в js.

рони · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript