Форум

FaustL · #11 (**permalink**) 04.03.2014, 22:19

Спасибо вам огромное!

FaustL · #12 (**permalink**) 22.03.2014, 20:52

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

<!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="news-text-full">

<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>

</div>
</body>
</html>

Чтобы этот скрипт работал только в блоке .news-text-full
Заранее спасибо!

рони · #13 (**permalink**) 22.03.2014, 21:18

<!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.querySelectorAll(cls);
       for (var i=0; i<divs.length; i++)  {divs[i].style.display= show ? 'block':'none'}

     }
  </script>
</head>
<body>
<a class="yr" onclick="toggle('.news-text-full .storyimg');return(false)">Показать картинки</a>

<div class="news-text-full">

<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>

</div>
</body>
</html>

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

рони · #14 (**permalink**) 22.03.2014, 22:23

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .news-text-full div{display: none;}
  a{cursor: pointer;} 
  </style>
  <script>
var toggle = function (cls, yes, no) {
    var show;
    return function (obj) {
        show = !show;
        obj['textContent'||'text'] = show ? no : yes;
        var divs = document.querySelectorAll(cls);
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = show ? 'block' : 'none'
        }
        return false
    }
};

var showNews = toggle('.news-text-full .storyimg','Показать картинки','Скрыть картинки'),
    showStory = toggle('.news-text-full .story','Показать картинки','Скрыть картинки');
  </script>
</head>
<body>
<a class="yr" onclick="return showNews(this)">Показать картинки</a>

<div class="news-text-full">

<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>
<div class="storyimg">
  <img src="...">
</div>

</div>
<br>
<a class="yr" onclick="return showStory(this)">Показать картинки</a>

<div class="news-text-full">

<div class="story">
  <img src="...">
</div>
<div class="story">
  <img src="...">
</div>
<div class="story">
  <img src="...">
</div>

</div>
</body>
</html>

Vlasenko Fedor · #15 (**permalink**) 23.03.2014, 03:21

http://jsfiddle.net/vlasenkofedor/zQ6ae/
демонстрация возможности

Форум

Справочник

Discord чат

Курсы javascript