Zmiana klasy w jQuery Opcje

[forte94]

Witam, tworzę menu które podświetla obrazki z danej kategorii, którą zaznaczymy. Menu po kliknięciu na dany przycisk powinno podświetlić (opacity:1) obrazki z kategorii przycisku. Natomiast po ponownym kliknięciu na przycisk, powinno ukryć obrazki (opacity:0.2). Menu jest już prawie gotowe, pojawia się problem prz "wyciskaniu" przycisku.

Przykładowy przycisk wygląda tak:

[HTML] pobierz, plaintext 
<div class="kategoria1 przycisk">Nazwa kategorii</div>
[HTML] pobierz, plaintext 

Natomiast przykładowy skrypt do przycisku wygląda tak:

[HTML] pobierz, plaintext 
	$(".kategoria1").click(function () { 
 
		$(".kategoria2").css("opacity","0.2");
		$(".kategoria3").css("opacity","0.2");
		$(".kategoria4").css("opacity","0.2");
		$(".kategoria5").css("opacity","0.2");		
		$(".kategoria6").css("opacity","0.2");		
 
		$(".kategoria1").css("opacity","1");
		$(".kategoria1").addClass("wcisniety1");
		$(".kategoria1").removeClass("kategoria1");
	});
[HTML] pobierz, plaintext 

A przykładowy skrypt do wciśniętego przycisku wygląda tak:

[HTML] pobierz, plaintext 
 
	$(".wcisniety1").live('click',function(){
		$(".kategoria1").css("opacity","1");
		$(".kategoria2").css("opacity","1");
		$(".kategoria3").css("opacity","1");
		$(".kategoria4").css("opacity","1");		
		$(".kategoria5").css("opacity","1");
		$(".kategoria6").css("opacity","1");	
		$(".wcisniety1").addClass("kategoria1");
		$(".wcisniety1").removeClass("wcisniety1");		
	});
[HTML] pobierz, plaintext 

Problem polega na tym, że skrypty wykonują się jeden po drugim, a więc zawsze wracają do stanu z przed kliknięcia. Po prostu skrypt pierwszy zmienia nazwę klasy, a skrypt drugi jest przypisany dla tej klasy i wykonuje się. Przy zamianie kolejności skryptów w pliku js dzieje się to samo. Jak sobie z tym poradzić?

[radziopoke]

Mam pytanie czy tworzysz jakieś elementy dynamicznie że używasz live. Bo jeżeli nie to nie jest on tu potrzebny i wtedy można to zrobić tak

[HTML] pobierz, plaintext 
$(".kategoria1").click(function () {
	if($(".kategoria1").css("opacity")=="0.2")
	{
		$(".kategoria2").css("opacity","0.2");
		$(".kategoria3").css("opacity","0.2");
		$(".kategoria4").css("opacity","0.2");
		$(".kategoria5").css("opacity","0.2");		
		$(".kategoria6").css("opacity","0.2");		
		$(".kategoria1").css("opacity","1");
	}
	else
	{	
		$(".kategoria1").css("opacity","0.2");
	}
});
[HTML] pobierz, plaintext 

i takie jedno pytanie dlaczego po kliknięciu wciśniętego przycisku w twoim skrypcie resztę przycisków zmieniasz opacity na 1

Ten post edytował radziopoke 16.07.2012, 16:25:06