Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript]INstrukcja w zależności od klikniętego diva
Forum PHP.pl > Forum > Przedszkole
djtomaszq
W poniższych kodach wyswietlaja mi się dwie belki i pod każdą jest ukryta jeden div z danymi, który otwiera się i zamyka po kliknięciu na belkę nad nim.
Mam dla każdej belki osobno ustawiony kod aby to otwierał. Kod .js jest identyczny jedynie rózni się tym => "5_kolejka" i "2_kolejka. Jak dodam takich kolejek jeszcze 100 to kod będzie ogromny. Jak to zoptymalizować ?

plik .php
  1. <div id="2_kolejka" class="belka_naglowek">
  2. <div style="float: left;">Kolejka 2</div>
  3. <div class="rozwin" style="float: right;">Rozwiń >></div>
  4. <div style="clear: both;"></div>
  5. </div>
  6.  
  7. <div class="zaw_belka_2">
  8. <div style="width: 100%;">
  9. <div class="tv-yt">
  10. <p style="text-align: center;">Mecz 1</p>
  11. </div>
  12.  
  13. <div style="clear: both;"></div>
  14. </div>
  15. </div>
  16.  
  17. <div id="5_kolejka" class="belka_naglowek">
  18. <div style="float: left;">Kolejka 5</div>
  19. <div class="rozwin" style="float: right;">Rozwiń >></div>
  20. <div style="clear: both;"></div>
  21. </div>
  22.  
  23. <div class="zaw_belka_5">
  24. <div class="tv-yt">
  25. <p style="text-align: center;">Mecz 2</p>
  26. <div style="clear: both;"></div>
  27. </div>
  28.  


plik .js
  1. $("#2_kolejka").click(function()
  2. {
  3. if (cycle % 2 === 0)
  4. {
  5. $("#2_kolejka > .rozwin").text('Rozwiń >>');
  6. } else
  7. {
  8. $("#2_kolejka > .rozwin").text('Zwiń <<');
  9. }
  10. cycle++;
  11.  
  12. $(".zaw_belka_2").toggle("slow");
  13. });
  14.  
  15. $("#5_kolejka").click(function()
  16. {
  17. if (cycle % 2 === 0)
  18. {
  19. $("#5_kolejka > .rozwin").text('Rozwiń >>');
  20. } else
  21. {
  22. $("#5_kolejka > .rozwin").text('Zwiń <<');
  23. }
  24. cycle++;
  25.  
  26. $(".zaw_belka_5").toggle("slow");
  27. });
Comandeer
Operować na klasach i strukturze DOM (element, który chcesz pobrać, to sąsiad)
djtomaszq
Nie mam pojęcia jak. Próbuje zrobić coś takiego:

wszystkie belki mają tą samą klase ale inne ID.
Robię click po classie i wtedy do zmiennej przypisuje id tej classy i wtedy podstawiam zmienną do algorytmu.
Czy to dobry pomysł?

... a jeśli tak to jak do zmiennej przypisać ID z klikniętej classy w tym samym divie ?

przykład:

  1. <div class="numer" id="1"></div>
  2. <div class="numer" id="2"></div>
  3. <div class="numer" id="3"></div>


  1. $(.numer).click(function()
  2. {
  3. var zmienna = i tutaj przypisuje id kliknietej klasy
  4. });


Można coś takiego zrobić?
rad11
  1. var zmienna = $(this).attr('id');
Comandeer
https://jsfiddle.net/q9egt0r3/
koodo218
Cytat(djtomaszq @ 2.01.2016, 18:06:31 ) *
<div class="numer" id="1"></div>
<div class="numer" id="2"></div>
<div class="numer" id="3"></div>

Nazwy atrybutów nie zaczynamy od cyfry.
Comandeer
@koodo218 nieprawda, można:
Cytat("http://www.w3.org/TR/html5/dom.html#the-id-attribute")
There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
koodo218
Cytat(Comandeer @ 2.01.2016, 23:32:32 ) *
@koodo218 nieprawda, można:

Całe życie w błędzie Lkingsmiley.png
viking
Nie całe życie tylko HTML5 wink.gif Zresztą to chyba nie było od początku możliwe? Coś mi się kojarzy że pierwsze drafty miały identyczne ograniczenia jak html/xhtml czyli id nie mógł się zaczynać od cyfr itd.
Comandeer
Owszem, miały. Sam nie wiem kiedy znieśli to ograniczenie, ale… po prostu nagle zaczęło działać biggrin.gif W sumie miło, że W3C opiera specyfikację na rzeczywistości, a nie próbuje ją nagiąć do swoich wymysłów.
viking
Hmm. Kolejna rzecz w której trzeba być na bieżąco. Jak jeszcze HTMLa będzie trzeba się co tydzień uczyć na nowo to przekichane.
Comandeer
Co tydzień? Część specek zmienia się codziennie wink.gif Na szczęście HTML jako HTML jest w miarę stabilny.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.