[jQuery] Zamiana klas Opcje

[-xavi_sof-]

Witam

Mam problem z zamianą klas z poziomu jQuery.

[HTML] pobierz, plaintext 
			<!--Question #1-->
			<div class="question">
				<div class="bg-question">
					<div class="plus"></div>  <--- CHODZI TYLKO O TO
					<div class="question-content"><h4 class="white">
						Nulla in lorem quis lacus tincidunt faucibus at quis itolit?
					</h4></div>
				</div>
				<div class="bg-answer">
					<p class="grey-light">
						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. 
					</p>	
				</div>
			</div>
 
 
			<!--Question #2-->
			<div class="question">
				<div class="bg-question">
					<div class="plus"></div>  <--- NIE CHODZI O TO
					<div class="question-content"><h4 class="white">
						Nulla in lorem quis lacus tincidunt faucibus at quis itolit?
					</h4></div>
				</div>
				<div class="bg-answer">
					<p class="grey-light">
						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. 
					</p>	
				</div>
			</div>
[HTML] pobierz, plaintext 

[XML] pobierz, plaintext 
$(document).ready(function(){
	$('.bg-answer').hide(); //Hide all answers
 
	$('.bg-question').toggle(
		function(){
			$(this).next('.bg-answer').fadeIn();
			$(this).next('.minus').removeClass('plus').addClass('minus'); <-- tu chce usunąć klase plus i wpisac w to miejsce klase minus
		},
		function(){
			$(this).next('.bg-answer').fadeOut();
			$(this).next('.minus').removeClass('minus').addClass('plus'); <-- odwrotnie
		}
	);	
 
 
});
[XML] pobierz, plaintext 

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

Ten post edytował xavi_sof 14.06.2014, 18:10:54

[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-]

.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/

[HTML] pobierz, plaintext 
$(this).children().find('.plus').removeClass('plus').addClass('minus');
[HTML] pobierz, plaintext 

Hmm.. co tutaj nie gra?

[trueblue]

Albo children albo find.
Children bezpośrednie dzieci rodzica.
Find wszystkie poziomy w dół od rodzica.

[-xavi_sof-]

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

$(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

[HTML] pobierz, plaintext 
$(this).children('.plus').removeClass('plus').addClass('minus');
[HTML] pobierz, plaintext 

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