[JavaScript]JS toggle dla tego samego ID lub class, toggle dla kilku kontenerów |
[JavaScript]JS toggle dla tego samego ID lub class, toggle dla kilku kontenerów |
6.06.2018, 18:13:52
Post
#1
|
|
Grupa: Zarejestrowani Postów: 680 Pomógł: 28 Dołączył: 14.08.2014 Ostrzeżenie: (0%) |
Panowie czy jest wykonalne utworzenie toggle dla tego samego ID lub class ?
chodzi o to , że w pętli mam rekordy do którego chce przypisać ID / class
Załóżmy że poniżej wyświetliłem z bazy: <div id="click">Gienek</div> <div class="show" style="display:none;">Gienek jest fajnym gościem, który lubi pomagać innym.</div> <div id="click">Franek</div> <div class="show" style="display:none;">Franek też jest fajny, ale nie lubi już pomagać innym.</div> <div id="click">Zbyszek</div> <div class="show" style="display:none;">Zbyszek to tajemniczy gość. </div> Każde kliknięcie w "kolejny" kontener chowa ten poprzedni kontener. Jak to rozbudować ? Dodaj , że powyższa funkcja JS działa tylko dla pierwszego kontenera. |
|
|
6.06.2018, 18:29:04
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
id jest unikalne dla dokumentu. Zastosuj klasy albo numerację #id1
-------------------- |
|
|
6.06.2018, 18:31:26
Post
#3
|
|
Grupa: Zarejestrowani Postów: 680 Pomógł: 28 Dołączył: 14.08.2014 Ostrzeżenie: (0%) |
a czy klasa może być taka sama dla każdego kontenera ?
Bo póki co jeśli kliknięcie w którykolwiek kontener rozwija mi wszystkie kontenery, ponowne kliknięcie zamyka mi wszystkie kontenery, a jak zrobić by to się tyczyło tylko tego przy którym klikam. Ten post edytował casperii 6.06.2018, 18:41:15 |
|
|
6.06.2018, 20:05:04
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
-------------------- |
|
|
6.06.2018, 20:30:51
Post
#5
|
|
Grupa: Zarejestrowani Postów: 680 Pomógł: 28 Dołączył: 14.08.2014 Ostrzeżenie: (0%) |
|
|
|
6.06.2018, 20:53:01
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 365 Pomógł: 1114 Dołączył: 30.08.2006 Ostrzeżenie: (0%) |
A jquery umiesz osadzić? Script i takie sprawy.
-------------------- |
|
|
6.06.2018, 20:57:25
Post
#7
|
|
Grupa: Zarejestrowani Postów: 680 Pomógł: 28 Dołączył: 14.08.2014 Ostrzeżenie: (0%) |
nie rozumiem pytania.
Skoro to działa:
to rodzi się pytanie czemu to nie działa :
|
|
|
6.06.2018, 20:59:47
Post
#8
|
|
Grupa: Zarejestrowani Postów: 286 Pomógł: 46 Dołączył: 10.01.2016 Ostrzeżenie: (0%) |
Kod body { background:grey; } div:nth-child(2n+1) { border:1px solid orange; display:inline-block; } div { cursor:pointer; } .hide { display:none; } Kod <div class="click">Gienek</div> <div class="hide">Gienek jest fajnym gościem, który lubi pomagać innym.</div> <div class="click">Franek</div> <div class="hide">Franek też jest fajny, ale nie lubi już pomagać innym.</div> <div class="click">Zbyszek</div> <div class="hide">Zbyszek to tajemniczy gość. </div> Kod function my_toggle(e) {
var click = document.querySelectorAll('.click'); if(e.target.className==='click') { var my_hide = document.querySelectorAll('.click'); var arr = Array.from(my_hide); var index_c = (arr.indexOf(e.target)); var something = document.querySelectorAll('.click + .hide')[index_c]; if(something.style.display=='block') { something.style.display = 'none'; }else { something.style.display = 'block' } } } document.addEventListener('click',my_toggle,false); Ten post edytował Neutral 6.06.2018, 21:03:08 |
|
|
12.06.2018, 20:08:03
Post
#9
|
|
Grupa: Zarejestrowani Postów: 680 Pomógł: 28 Dołączył: 14.08.2014 Ostrzeżenie: (0%) |
@Neutral konsola nic nie wywala ale działanie skryptu nie działa.
Może wina dla tego , że struktura htmla wygląda tak: Ten post edytował casperii 12.06.2018, 20:09:15 |
|
|
12.06.2018, 20:31:54
Post
#10
|
|
Grupa: Zarejestrowani Postów: 286 Pomógł: 46 Dołączył: 10.01.2016 Ostrzeżenie: (0%) |
Jeśli .hide będzie pod .click, to tylko zmień to:
Kod var something = document.querySelectorAll('.click + .hide')[index_c]; na to: Kod var something = document.querySelectorAll('.click ~ .hide')[index_c]; . Wyrzuć dodatkowo tamten CSS, bo nie będzie dobrze działać. |
|
|
12.06.2018, 21:38:37
Post
#11
|
|
Grupa: Zarejestrowani Postów: 286 Pomógł: 46 Dołączył: 10.01.2016 Ostrzeżenie: (0%) |
Skorzystaj z ostatniego skryptu z tej strony:
ForumWeb. |
|
|
Wersja Lo-Fi | Aktualny czas: 24.04.2024 - 12:17 |