Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jquery pokaż diva po klinięciu w radio button (multiple)
Forum PHP.pl > Forum > Po stronie przeglądarki
Rufus_84
Witam
Mam następujący problem

Posiadam kilka pól radio z tą samą nazwą


  1. <div class="form-group">
  2. <div class="form-radio">
  3. <input type="radio" name="invoice_radio[]" value="srodek_list">
  4. <p>Wybierz z listy</p>
  5. </div>
  6. <div class="form-radio">
  7. <input type="radio" name="invoice_radio[]" value="srodek_new">
  8. <p>Dodaj nowy</p>
  9. </div>
  10. <div class="srodek_lista">
  11. div content
  12. </div>
  13. <div class="srodek_nowy">
  14. div content
  15. </div>
  16. </div>
  17.  
  18. <div class="form-group">
  19. <div class="form-radio">
  20. <input type="radio" name="invoice_radio[]" value="srodek_list">
  21. <p>Wybierz z listy</p>
  22. </div>
  23. <div class="form-radio">
  24. <input type="radio" name="invoice_radio[]" value="srodek_new">
  25. <p>Dodaj nowy</p>
  26. </div>
  27. <div class="srodek_lista">
  28. div content
  29. </div>
  30. <div class="srodek_nowy">
  31. div content
  32. </div>
  33. </div>



Mają te same nazwy ponieważ są dodawane dynamicznie (zawartość diva form-group) po kliknięciu dodaj nową pozycję

Problem polega na tym, że chciałbym aby w zależności od wuboru radio buttona pojawiała się zawartość diva "srodek_lista" lub "srodek_nowy"

Kod:

  1. $(document).ready(function(e) {
  2. $('input:radio[name="invoice_radio[]"]').click(function(e) {
  3. if($(this).val()=='srodek_list') {
  4. $('.srodek_lista').slideDown('fast');
  5. $('.srodek_nowy').slideUp('fast');
  6. }
  7. if($(this).val()=='srodek_new') {
  8. $('.srodek_nowy').slideDown('fast');
  9. $('.srodek_lista').slideUp('fast');
  10. }
  11. });
  12. });


powoduje, że pojawiają się wszystkie divy "srodek_lista" lub "srodek_nowy" na raz i tylko po kliknięciu w pierwszą grupę radio buttonów.
Czy da się zrobić tak, żeby działo to w każdej grupie osobno?

Z góry dziękuję za pomoc
Rafał
Comandeer
1) Jeśli grupy są dynamicznie dodawane, to trzeba wykorzystać event delegation - poczytaj w dokumentacji jak się to robi na $.fn.on (od razu hint: interesuje Cię zdarzenie change, nie click!)
2) Trzeba przejść do rodzica danej grupy inputów i wybrać następujący po nim element z odpowiednią klasą.
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.