[jquery] div's auswählen mit gleichem classname

[Sorc]

Hallo zusammen,
ich habe mal ne Frage.
Folgender Code:

...
<div class"klasse">User 1</div>
<div class"klasse">User 2</div>
<div class"klasse">User 3</div>
...

Ich möchte jetzt, wenn ich auf einen der User klicke, dass sich seine Hintergrundfarbe ändert. Ich weiß das wenn ich jedem div eine ID gebe, dass es einfach zu realisieren wäre, aber dieses Bsp. wird mit einer for Schleife in PHP generiert und die Anzahl der User kann dann unterschielich sein.Nun weiß ich nicht so recht wie ich das ganze lösen soll. Ich habe es mit "this" versucht aber da macht jquery leider nichts. Bin etwas Ratlos wie ich das ganze lösen kann ohne verschiedenen ID's oder classes zu nutzen.

Freue mich über Tipps.

 

[Duddle]

AW: [jquery] div's auswählen mit gleichem classname

$(this)

gibt dir ein jQuery-Objekt von diesem Knoten. Ansonsten: zeig deinen Code.


Duddle

 

[Sorc]

AW: [jquery] div's auswählen mit gleichem classname

$(document).ready(function() {
    $(this).click(function(event) {
        $(this).attr({
            background-color: "blue"
        });
    });
});

Aber dann kann ich ja hinklicken wo ich will und es würde jedes div, span, p usw ändern. Oder liege ich da Falsch und es stimmt etwas anderes nicht?

 

[SineTempore]

AW: [jquery] div's auswählen mit gleichem classname

$(document).ready(function() {
    $("div.klasse").click(function(event) {
        $(this).css("background-color", "blue");
    });
});

so sollte es gehen

 

[cebito]

AW: [jquery] div's auswählen mit gleichem classname

Du solltest dir klar darüber werden, das this Kontextabhängig ist. In deinem Falle bezieht sich this auf das window-Objekt. Woher soll jQuery auch wissen, das du mit this die class klasse meinst. So wird ein Schuh draus...

$('.klasse').click(function(){
  $(this).css({
      'background-color': 'blue'
  });
});

... jedoch nur, wenn du die Klasse auch richtig vergibst. Statt class"klasse" find ich persönlich class="klasse" besser

 

[Sorc]

AW: [jquery] div's auswählen mit gleichem classname

Ich danke euch, jetzt funktioniert es. Muss jetzt aber leider feststellen, dass das script nicht mehr funktioniert wenn sich der "Klickbereich" über AJAX neu lädt. Also ich habe nen div der sich per AJAX alle 10sec neu lädt. Vor dem ersten laden funktioniert es aber sobald sich der div neu lädt funktioniert es nicht mehr.

 

[cebito]

AW: [jquery] div's auswählen mit gleichem classname

Schau dir mal .bind() und .live() an.

 

[Sorc]

AW: [jquery] div's auswählen mit gleichem classname

Danke dir cebito, mit .live() hat es geklappt. Wäre aber nett wenn du mir sagen kannst, was ich da gemacht bzw erzielt habe. Mein Englisch ist leider nicht ausreichend um es mir zu übersetzen.

 

[fexx]

AW: [jquery] div's auswählen mit gleichem classname

Mit .live() kannst du auf Elemente zugreifen, die erst später dem DOM hinzugefügt werden. Z.B. über eine AJAX funktion, oder per .apped() Befehl.

 

[cebito]

AW: [jquery] div's auswählen mit gleichem classname

mit .bind() bindest du einen Eventhandler an ein Element (bspw. Elemente mit einer Klasse). Das Problem, wenn ich im Nachhinein das Element verändere (bspw. die Klasse wegnehme) bleibt der Eventhandler trotzdem erhalten. Anders herum, wenn ich neue Elemente mit o.g. Klasse erzeuge (per Ajax oder append()), bekommen die den Eventhandler nicht, da sie zum Zeitpunkt des Bindings noch nicht existierten. Das heißt, wir müssen bei jeder Änderung den Dom erneut durchgehen (Rebinding) um den Eventhandler neu zuzuordnen.
Mit .live() stellt jQuery hier eine komfortable Methode zur Verfügung obiges Problem zu umgehen (Event Delegation). Dabei werden alle übergeordneten Elemente durchsucht um zu schauen, welche Eventhandler besitzen um dann entsprechend weiter zu verfahren. Das hat aber auch den Nachteil, das es bei jeder Auslösung eines Events aufgerufen wird. .live() lässt sich außerdem nicht auf die Zustände focus und blur anwenden, dafür gibt es dann focusin bzw. focusout