Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] dynamiczne divy
Forum PHP.pl > Forum > Po stronie przeglądarki
dopelganger
witam,
z bazy wyświetlam klikalne divy (pr-1, pr-2 ...) oraz treści dla danego klikniętego diva w formie popupa (serrie-1,serrie-2...). Oczywiście domyślnie treści są ukryte (display:none dla klasy serrie_contener).
Chciałbym, aby po kliknięciu na np: pr-1 pojawiała się odpowiednia treść, czyli np: serrie-1 itd....
Kombiuje tak (skrypt poniżej), ale pojawiają się wszystkie ukryte divy - serrie. Prosze o pomoc.

  1. <script>
  2. $(document).ready(function() {
  3. $('div[id^="pr-"]').click(function() {
  4. $('div[id^="serrie-"]').fadeIn();
  5. });
  6. });
  7. </script>
  8.  
  9. <div id="pr-1"></div>
  10. <div id="pr-2"></div>
  11. <div id="pr-3"></div>
  12. ...
  13. <div class="serrie_contener" id="serrie-1">text text 1</div>
  14. <div class="serrie_contener" id="serrie-2">text text 2</div>
  15. <div class="serrie_contener" id="serrie-3">text text 3</div>
  16. ...
Damonsson
Powinieneś umieścić jedno w drugim, bo robisz niepotrzebnie puste DIVy.

Ale jak się upierasz to:
Np. tak je sobie możesz połączyć, pobierasz data-div1id i włączasz div z tą samą wartością przy data-div2id.

[JAVASCRIPT] pobierz, plaintext
  1. <div id="pr-1" data-div1id="1"></div>
  2. <div id="pr-2" data-div1id="2"></div>
  3. <div id="pr-3" data-div1id="3"></div>
  4. ...
  5. <div class="serrie_contener" id="serrie-1" data-div2id="1">text text 1</div>
  6. <div class="serrie_contener" id="serrie-2" data-div2id="2">text text 2</div>
  7. <div class="serrie_contener" id="serrie-3" data-div2id="3">text text 3</div>
[JAVASCRIPT] pobierz, plaintext
dopelganger
te divy treści są w formie popupa, dlatego nie dałem ich wewnątrz
trueblue
W obsłudze zdarzenia click pobierz id diva, zamień "pr" na "", doklej do wyniku "serrie" i będziesz mieć id docelowego diva.
Możesz też w divach "pr" dodać atrybut data-target="serrie-x", który będzie kierować na docelowego diva, wtedy w obsłudze click pobierasz ten atrybut i masz od razu gotowe id diva do odkrycia.
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.