Mehrere DIVs - welches löst Event aus?

[Quereinsteiger]

Moin moin,

ich halte mich mit dem langen Geschnacke zurück und komme gleich zur Sache:

Ich habe zwölf Divs oder Links und alle lösen beim onclick die gleiche Funktion aus. Jedoch soll nur das angeklickte dabei die Klasse wechseln (oder als noch einfacheres Beispiel, soll nur dieses die Farbe wechseln). Es gibt doch bestimmt eine ganz einfache Möglichkeit, so dass ich da nicht 12 verschiedene Funktionen für ein und die selbe Sache schreiben muss und ich gerade nur den Wald vor lauter Bäumen nicht sehe?
Ich hoffe, ich habe mich versändlich ausgedrückt :(
Also wie finde ich heraus, welches Element das Event auslöst?

Liebe Grüße

 

[Chronos]

Hi,

möchtest du herausfinden, welches Element, welches Event auslöst oder möchtest du bei jedem Kick auf ein Element eine Klasse setzen?
Ich denke du willst das erste tun und um zu sehen, welches Element ein Event auslöst willst du Klassen setzen, richtig?

Nutzt du JavaScript ohne jQuery?

Also mit jQuery wäre es ziemlich einfach, z. B. so:

var btn_klick = $('.btn-klick');

btn_klick.on({
     "click": function() {         
        $(this).toggleClass('rot');             
     }
});

Du musst natürlich deine Variable (den Selektor), auf die/den du die Click-Events legst, so wählen, dass
alle deine DIVs/Links angesprochen werden. In meinem Beispiel die Klasse "btn-klick".

Direkt rausfinden welches Element welches Event auslöst ohne solche Hilfsmittel geht bisher noch nicht so wirklich, eine der zukünftigen Firefox-Versionen wird es können (kA ob es auch mit jQuery gehen würde).

 

[Quereinsteiger]

habe ich natürlich vergessen.. ich würde gerne nur mit js auskommen falls dies möglich ist
und noch eine kleine ergänzung: wenn ein zweites div angeklickt wird, dann soll das erste natürlich wieder in die ursprungsklasse wechseln und dafür das zweite die neue annehmen..

 

[scbawik]

habe ich natürlich vergessen.. ich würde gerne nur mit js auskommen falls dies möglich ist
und noch eine kleine ergänzung: wenn ein zweites div angeklickt wird, dann soll das erste natürlich wieder in die ursprungsklasse wechseln und dafür das zweite die neue annehmen..

Gibt keinen Grund jQuery nicht einzusetzen - keinen einzigen.
jQuery ist nichts weiter (nun ja, schon ein bisschen mehr) als eine Sammlung an nützlichen Javascript Funktionen.

 

[Chronos]

Mit der weiteren Anforderung würde es mit jQuery so aussehen:

var btn_klick = $('.btn-klick');
btn_klick.on({
     "click": function() {
        btn_klick.removeClass('rot');       
        $(this).toggleClass('rot');           
     }
});

Also nur eine Zeile mehr.
Ich kann es sehr gut verstehen, nur JavaScript allein nutzen zu wollen aber ehrlich gesagt, würde ich genau das was du willst damit nicht können und mir wäre die Mühe auch zu groß.

 

[Tronjer]

Statt toggleClass() dann aber addClass().

 

[Chronos]

Statt toggleClass() dann aber addClass().

Ja ^^

 

[Quereinsteiger]

also erstmal vielen dank! :)
das klappt soweit ganz gut und genau so wie ich mir das vorgestellt habe. nochmals vielen dank !

kleine unschöne sache noch: die funktion reagiert erst nachdem ich ein zweites mal geklickt habe. danach funktioniert es direkt beim ersten klicken.. woran kann das liegen? :/

 

[Quereinsteiger]

hm ok.. hab nun doch ne js-lösung hinbekommen..
beim aufruf der funktion gebe ich einfach nen paramenter mit, mit dem ich den "auslöser" identifizieren kann... ob das nun letztendlich so schön ist wie jq ist fraglich
interessieren würde mich dennoch die lösung zum post vorher..

 

[Chronos]

also erstmal vielen dank! :)
das klappt soweit ganz gut und genau so wie ich mir das vorgestellt habe. nochmals vielen dank !

kleine unschöne sache noch: die funktion reagiert erst nachdem ich ein zweites mal geklickt habe. danach funktioniert es direkt beim ersten klicken.. woran kann das liegen? :/

Du musst deinen DIVs im HTML die klasse schon mitgeben ;) ansonsten haben sie diese beim ersten Click nicht.
Sprich:

<div class="red"></div>

Edit: denke ich zu mindestens ^^, grade keine Zeit es auszuprobieren

 

[Chronos]

hm ok.. hab nun doch ne js-lösung hinbekommen..
beim aufruf der funktion gebe ich einfach nen paramenter mit, mit dem ich den "auslöser" identifizieren kann... ob das nun letztendlich so schön ist wie jq ist fraglich
interessieren würde mich dennoch die lösung zum post vorher..

Wie wäre deine Lösung denn?