Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Zamiana klas
Forum PHP.pl > Forum > Przedszkole
xavi_sof
Witam

Mam problem z zamianą klas z poziomu jQuery.

  1. <!--Question #1-->
  2. <div class="question">
  3. <div class="bg-question">
  4. <div class="plus"></div> <--- CHODZI TYLKO O TO
  5. <div class="question-content"><h4 class="white">
  6. Nulla in lorem quis lacus tincidunt faucibus at quis itolit?
  7. </h4></div>
  8. </div>
  9. <div class="bg-answer">
  10. <p class="grey-light">
  11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros est, ut hendrerit purus auctor at. Nulla in lorem quis lacus tincidunt faucibus at quis velit. Phasellus lacus metus, scelerisque in dapibus sed, condimentum at leo. Phasellus condimentum arcu eget auctor dictum. Phasellus et feugiat dolor, in eleifend velit.
  12. </p>
  13. </div>
  14. </div>
  15.  
  16.  
  17. <!--Question #2-->
  18. <div class="question">
  19. <div class="bg-question">
  20. <div class="plus"></div> <--- NIE CHODZI O TO
  21. <div class="question-content"><h4 class="white">
  22. Nulla in lorem quis lacus tincidunt faucibus at quis itolit?
  23. </h4></div>
  24. </div>
  25. <div class="bg-answer">
  26. <p class="grey-light">
  27. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros est, ut hendrerit purus auctor at. Nulla in lorem quis lacus tincidunt faucibus at quis velit. Phasellus lacus metus, scelerisque in dapibus sed, condimentum at leo. Phasellus condimentum arcu eget auctor dictum. Phasellus et feugiat dolor, in eleifend velit.
  28. </p>
  29. </div>
  30. </div>


  1. $(document).ready(function(){
  2. $('.bg-answer').hide(); //Hide all answers
  3.  
  4. $('.bg-question').toggle(
  5. function(){
  6. $(this).next('.bg-answer').fadeIn();
  7. $(this).next('.minus').removeClass('plus').addClass('minus'); <-- tu chce usunąć klase plus i wpisac w to miejsce klase minus
  8. },
  9. function(){
  10. $(this).next('.bg-answer').fadeOut();
  11. $(this).next('.minus').removeClass('minus').addClass('plus'); <-- odwrotnie
  12. }
  13. );
  14.  
  15.  
  16. });



Ma być to efekt accordion, do pluginu FAQs.
Nie wiem jak się dostać tylko do najbliższego diva o klasie plus i zamienić to na minus... Proszę o pomoc
trueblue
.next() dotyczy kolejnego elementu w hierarchii DOM, ale na tym samym poziomie co badany element.
http://api.jquery.com/find/
http://api.jquery.com/children/
xavi_sof
Cytat(trueblue @ 14.06.2014, 19:16:02 ) *
.next() dotyczy kolejnego elementu w hierarchii DOM, ale na tym samym poziomie co badany element.
http://api.jquery.com/find/
http://api.jquery.com/children/



  1. $(this).children().find('.plus').removeClass('plus').addClass('minus');


Hmm.. co tutaj nie gra?
trueblue
Albo children albo find.
Children bezpośrednie dzieci rodzica.
Find wszystkie poziomy w dół od rodzica.
xavi_sof
Cytat(trueblue @ 14.06.2014, 19:35:58 ) *
Albo children albo find.
Children bezpośrednie dzieci rodzica.
Find wszystkie poziomy w dół od rodzica.


$(this) <-- aktualny pobierany div ktory zostal klikniety
.children() <-- wchodze głębiej (do wszystkich dzieci diva 'this')
.find('.plus') <-- znajduje diva o klasie .plus
.removeClass('plus').addClass('minus'); <-- usuwam klase plus, dodaje minus

Hmm ;/ wydaje mi się że myślenie mam dobre, chyba raczej kwestia zapisu

Cytat(xavi_sof @ 14.06.2014, 19:38:53 ) *
$(this) <-- aktualny pobierany div ktory zostal klikniety
.children() <-- wchodze głębiej (do wszystkich dzieci diva 'this')
.find('.plus') <-- znajduje diva o klasie .plus
.removeClass('plus').addClass('minus'); <-- usuwam klase plus, dodaje minus

Hmm ;/ wydaje mi się że myślenie mam dobre, chyba raczej kwestia zapisu



Yea! Find nie jest potrzebne smile.gif
  1. $(this).children('.plus').removeClass('plus').addClass('minus');


A da się to jakoś zrobić z find?
trueblue
Tak samo jak zrobiłeś z children, ale jeśli ".plus" jest bezpośrednim dzieckiem rodzica, to nie ma sensu.

P.S.
$(this).children().find('.plus') -> w bezpośrednich dzieciach this szuka dzieci z klasą plus
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.