Targeting mehrerer Elemente mit jQuery

7

Ich habe gesucht, bin aber leer ausgegangen und frage mich, ob ich eine jQuery-Anweisung verwenden kann, um mehrere Elemente auf einer Seite anzusprechen. Ich habe mehrere identische Schaltflächen auf einer Seite und sie bestehen jeweils aus einem linken, mittleren und rechten Hintergrund, wobei die Mitte den Text enthält und auf jede benötigte Größe erweitert werden kann. Jeder hat eine eindeutige ID und / oder Klasse. Ich habe es jetzt eingerichtet, so dass wenn Sie die Maus über ihren Container div die 3 Hintergründe ändern, um den Anschein zu geben, dass die Schaltflächen in einem anderen Zustand sind. Die Art, wie es jetzt gemacht wird, ist mit 1 Hover-Aufruf für jede Schaltfläche, die nach Klasse liegt (würde lieber ID verwenden, aber Sie können nicht mehrere Elemente mit derselben ID haben). Diesem Hover folgen 8 Ereignisse. Eine Hintergrundänderung für jede rechte linke und mittlere und eine Farbänderung für den mittleren Text.

Dies bedeutet viele Zeilen Code. Ich möchte alle Knöpfe gleichzeitig mit dem Hover - Ereignis aufrufen können oder das Hover - Ereignis irgendwie wissen lassen, um welche Schaltfläche es sich handelt, und diese Klasse oder ID oder sogar Namen zurück in jQuery zu werfen, was dann die Schaltflächen Unterklassen für rechts links und Mitte. Die Unterklasse für rechts links und Mitte ist auf allen Schaltflächen identisch. Wenn das Hover-Ereignis auf ein beliebiges Ereignis, das es genannt wird, fokussiert werden könnte, würde ich nur eine Reihe von Aufrufen benötigen, um die Hintergrundattribute zu ändern ... Der aktuelle Code ist unten für zwei der Tasten ...

%Vor%     
RAC 21.01.2010, 01:37
quelle

5 Antworten

31

Sie können:

%Vor%

Ich füge hinzu, dass ich denke, dass es besser wäre, das mit CSS-Klassen zu machen.

%Vor%

und

%Vor%

und Sie werden viel weniger Code haben.

Sie können auch Elemente mehrere Klassen geben:

%Vor%

und dann wird es noch einfacher:

%Vor%     
cletus 21.01.2010, 01:41
quelle
0
%Vor%     
vava 21.01.2010 01:45
quelle
0

Derzeit sieht der Code so aus:

%Vor%

Was aber auf den falschen Elementen funktioniert. Es ändert momentan die Schaltfläche, über die man schwebt, aber es fügt 3 Klassen zu den Tasten Wrapper und nicht zu den Unterklassen für Right Left And Middle hinzu: Ein Beispiel für die Schaltfläche ist:

%Vor%     
RAC 21.01.2010 03:24
quelle
0

Sie sollten auch darüber nachdenken, jQuery oder Javascript nicht zu verwenden. CSS sollte ausreichen. Gib einfach jedem Button dieselbe Klasse und mache so etwas in deinem CSS:

%Vor%

Es gibt jedoch einen Vorbehalt; IE (zumindest einige Versionen?) Unterstützt nicht: Hover auf Divs. Die Art, wie ich das tue, besteht darin, einen Button zu einem <a> zu machen und die zu gestaltenden Elemente innerhalb des Buttons als <span> s zu platzieren.

    
Jacob 21.01.2010 03:38
quelle
0

Ok, ich habe das funktioniert! Danke Cletus, dass du mich in die richtige Richtung geschickt hast ... Ich musste den Kinderselektor dafür verwenden, dann wähle jedes Kind und ändere seine individuellen Klassen ... Heres der Code ...

%Vor%

});

Funktioniert perfekt auf diese Weise. Ich wollte etwas kompaktes und leicht wiederverwendbar und ich denke, das deckt beide ab. Danke nochmal an alle ...

    
RAC 21.01.2010 03:50
quelle

Tags und Links