Открыть/закрыть для всех блоков с одинаковым 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. |
дивов с 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 надо заменить на что-то другое? |
именно, на getelementsbyclassname
|
Цитата:
изменял на getElementsByClassName, так пробовал как ".storyimg", так "storyimg" |
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>
Где неправильно подскажите пожалуйста |
FaustL,
создайте функцию и обработайте массив - нет у массива style |
Цитата:
|
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>
|
Спасибо вам огромное!
|
Всем снова привет! Возникла необходимость немного изменить этот код, а как не знаю.
В общем нужно, что бы это работало в определённом блоке:
<!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 Заранее спасибо! |
:write:
<!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/ Задавайте конкретные вопросы по ходу дела. |
Ещё один вариант на тему показать скрыть со сменой текста
:write:
<!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>
|
http://jsfiddle.net/vlasenkofedor/zQ6ae/
демонстрация возможности :) |
| Часовой пояс GMT +3, время: 04:57. |