onclick: css class ändern

[leo-magic]

Hallo,

Auf einer Seite werden in einer Liste nacheineander mehrere div's angezeigt.

<div class="a">
<div class="a">
<div class="a">

Was ich nun brauche wäre dies:

Klickt man auf ein div, ändert sich die css- Klasse dieses div's

Resultat wenn man auf das zweite div klickt wäre dann zB.

<div class="a">
<div class="b">
<div class="a">

Wenn ich nun auf das erste div klicken würde sollte das Resultat nun so aussehen:

<div class="b">
<div class="a">
<div class="a">

-> Alle anderen divs sollen wieder die andere Klasse übernehmen / Nur ein div aufs mal darf die Klasse "b" haben.


Wie kann ich das realisieren? Benutze jquery, villeicht gibts da eine einfache Lösung?

Danke für Eure Hilfe!
Léo

 

[Rupp]

Hier ein Vorschlag.

Das ganze lässt sich auch auf anderen Wegen lösen, lies dir doch einfach mal die jQuery Doku dazu durch. Die ist wirklich sehr übersichtlich, gut strukturiert und mit vielen Beispielen.

$(document).ready(function(){

	$("div").click(function() {

		$("div").each(function(){ // Gehe durch alle "div"-Elemente
			$(this).removeClass("a b").addClass("a"); // Die Klassen "a" und "b" des aktuellen "div"-Elements entfernen und dann erneut auf "a" setzen
		});

		$(this).removeClass("a").addClass("b"); // Klasse "a" des geklickten divs entfernen und danach die Klasse "b" setzen
	});

});

 

[leo-magic]

Hm, schon mal danke!

Das Script verursacht mir ein kleines Chaos... Kann man nur die div-Elemente mit einer bestimmten ID durchgehen?
Ich will ja nicht alle divs auf meiner Seite ändern...

Danke!
Léo

 

[leo-magic]

Achso. Ich hatte es so probiert, aber es funktionierte nicht...

$("div.a").click(function() {

		$("div.b").each(function()

Das Problem ist, dass die div's nach dem Laden der Seite mittels Ajax geladen werden... Und bei disen Div's funktioniert das Script nicht...

Was tun?

Danke,
Léo

 

[chris25]

Das Problem ist, dass die div's nach dem Laden der Seite mittels Ajax geladen werden... Und bei disen Div's funktioniert das Script nicht...

Problem richtig erkannt Ist generell so, dass DOM-Manipulationen nur mit vorhandenen Elementen funktionieren.

Abhilfe: http://jquery-howto.blogspot.com/2010/08/jquerylive-event-binding-to-ajax-loaded.html & http://api.jquery.com/live/

 

[leo-magic]

wow! Super! Vielen Dank!!
Léo