Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (JS) Spoiler / 12 сообщений из 12, страница 1 из 1
28.05.2010, 08:27:40
    #36654479
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
У меня на сайте используется подобие спойлера:

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

Вообщем, мне хотелось бы получить очень простой спойлер, с возможностью дублирования его на странице, чтобы при этом не страдал функционал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2010, 09:03:00
    #36654539
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
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, 10:29:44
    #36654734
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
krvsa,

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

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

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

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

2. Задавать уникальные ID для функции и div'а - этого тоже не хотелось бы, т.к. статьи собираются на странице движком, и не исключена ситуация, когда случайно попадутся два одинаковых спойлера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2010, 11:02:25
    #36654856
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
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:04:12
    #36654864
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
Яростный Меч2. В тестовом примере див идет сразу за ссылкой. Потому ищешь его через nextSiblingРазумеется, в реальном примере надо будет смотреть, как они взаимно расположены на самом деле, и уже опираться от этого.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.05.2010, 11:58:20
    #36655062
Alex721
Alex721
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
(JS) Spoiler
Яростный Меч,

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


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