ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Spoiler
12 сообщений из 12, страница 1 из 1
(JS) Spoiler
    #36654479
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
У меня на сайте используется подобие спойлера:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
<a class="podrobno" href="javascript:sh()">Читать дальше</a>
<div id="blabla" style="display:none">
text
</div>
<script type="text/javascript">
function sh() {
    obj = document.getElementById("blabla");
    if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
}
</script>
Назначение: скрывать большие тексты и показывать их при нажатии на спойлер.
Суть проблемы. Если я использую несколько таких спойлеров на странице, при этом вмето blabla задаю уникальный ID, то спойлеры все равно работают "криво". Т.е. жму любой, а открывается последний.

Как можно исправить код, чтобы сделать спойлеры независимыми?
Другой скрипт спойлера только приветствуется.

Заранее спасибо.
...
Рейтинг: 0 / 0
28.05.2010, 08:27:40
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654492
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721Как можно исправить код, чтобы сделать спойлеры независимыми?
Как насчет тестового примера от тебя?
...
Рейтинг: 0 / 0
28.05.2010, 08:36:49
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654499
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Вот тестовый пример:
...
Рейтинг: 0 / 0
28.05.2010, 08:42:23
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654503
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Проблема, насколько я понимаю в одинаковом названии функций sh() .
Но я не могу еще и придумывать уникальные имена функциям, т.к. у меня эти спойлеры вставляются на страницу динамически.

Вообщем, мне хотелось бы получить очень простой спойлер, с возможностью дублирования его на странице, чтобы при этом не страдал функционал.
...
Рейтинг: 0 / 0
28.05.2010, 08:44:50
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654539
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721 , как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<html>
<head>
<style>
.off {
	display: none;
}
.on {
	display: block;
}
</style>
<script type="text/javascript">
function sh(Id) {
	var o=document.getElementById(Id)
	o.className=(o.className=='off') ? 'on' : 'off'
}
</script>
</head>
<body>
<a href="javascript:sh('d1')">Читать дальше</a>
<div id='d1' class='off'>qwerty1</div>
<br />
<a href="javascript:sh('d2')">Читать дальше</a>
<div id='d2' class='off'>qwerty2</div>
<br />
<a href="javascript:sh('d3')">Читать дальше</a>
<div id='d3' class='off'>qwerty3</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.05.2010, 09:03:00
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654734
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
krvsa,

спасибо за метод, но мне кажется может быть еще проще)
...
Рейтинг: 0 / 0
28.05.2010, 10:29:44
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654748
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Alex721krvsa,

спасибо за метод, но мне кажется может быть еще проще)Да куда уж проще?
...
Рейтинг: 0 / 0
28.05.2010, 10:32:24
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654769
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex721но мне кажется может быть еще проще)
Show me... (с) Матрица
...
Рейтинг: 0 / 0
28.05.2010, 10:35:43
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654810
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Яростный МечAlex721krvsa,

спасибо за метод, но мне кажется может быть еще проще)Да куда уж проще?
Тут несколько моментов.

1. У меня есть отдельная страница. На ней собираются статьи. При этом некоторые из них довольно длинные поэтому их нужно спрятать в спойлер.
Спойлер используется только в одном этом месте - на этой странице(-цах). Поэтому мне не хотелось бы подгружать лишний стиль, подгружать скрипт в остальные страницы.
Т.е. в идеале хотелось бы на javascript сделать это.

2. Задавать уникальные ID для функции и div'а - этого тоже не хотелось бы, т.к. статьи собираются на странице движком, и не исключена ситуация, когда случайно попадутся два одинаковых спойлера.
...
Рейтинг: 0 / 0
28.05.2010, 10:46:32
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654856
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Alex7211. Поэтому мне не хотелось бы подгружать лишний стиль

2. Задавать уникальные ID для функции и div'а - этого тоже не хотелось бы, т.к. статьи собираются на странице движком, и не исключена ситуация, когда случайно попадутся два одинаковых спойлера.1. Ну можно не через класс, а напрямую. (через style.display)

2. В тестовом примере див идет сразу за ссылкой. Потому ищешь его через nextSibling
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<html>
<head>
<script type="text/javascript">
function sh(o) {
  while(o.tagName!=='DIV'){o = o.nextSibling;}
  o.style.display = (o.style.display=='none')?'':'none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="sh(this);">Читать дальше</a>
<div style="display:none">qwerty1</div>
<br />
<a href="javascript:void(0)" onclick="sh(this);">Читать дальше</a>
<div style="display:none">qwerty2</div>
<br />
<a href="javascript:void(0)" onclick="sh(this);">Читать дальше</a>
<div style="display:none">qwerty3</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.05.2010, 11:02:25
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36654864
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Яростный Меч2. В тестовом примере див идет сразу за ссылкой. Потому ищешь его через nextSiblingРазумеется, в реальном примере надо будет смотреть, как они взаимно расположены на самом деле, и уже опираться от этого.
...
Рейтинг: 0 / 0
28.05.2010, 11:04:12
| Ответить | Цитировать | Написать  
(JS) Spoiler
    #36655062
Фотография Alex721
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex721
Участник
Яростный Меч,

спасибо)
попробую)
...
Рейтинг: 0 / 0
28.05.2010, 11:58:20
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Spoiler
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1453040]:
 0ms
get settings:
 8ms
get forum list:
 20ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 224ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 224ms
total:  541ms
созд. / загр.: 541ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]