2016-05-09 11 views
0

Ich möchte wissen, ob es möglich ist, eine CSS-Klasse z. ".duck" als eine Variable in Javascript unter Verwendung von jQuery, z. var duck = $(".duck");CSS-Klassen als Variable in Javascript für die spätere Verwendung festlegen?

Ich habe dies mit dem "body" -Tag und mit CSS-IDs gemacht, aber es scheint nicht mit irgendeiner Art von Klasse zu arbeiten.

Ich möchte es als Variable für die spätere Verwendung festlegen, ich habe die ID "#frog" als "var frog = $ (" # Frosch ");" so in mein Javascript kann ich

frog.moveTo(0); 
frog.speed(0.3); 
frog.autoBounceOff(true); 

Aber für die Ente Klasse Typ I noch

$(".duck").moveTo(270); 
$(".duck").speed(0.65); 
$(".duck").onCollision(function(otherObj){ 

Ist es möglich einzustellen Klassen als Variable verwenden?

+1

'var duck = $ (". Duck ");' sollte funktionieren, also ist Ihre Antwort ja. – Shilly

+0

Ja, aber es wird nicht so funktionieren, wie Sie es erwarten. Wenn du '$ (". Duck ") tust, werden alle Elemente mit dieser Klasse * in diesem Moment aufgenommen *. jQuery-Sammlungen werden niemals automatisch aktualisiert, wenn sich das DOM ändert. Sie können also keine Variable erstellen, die immer auf alle * current * -Elemente mit dieser Klasse verweist. – JJJ

+0

Es gibt absolut keinen Grund, warum 'var duck = $ (". Duck ");' nicht funktionieren würde, es sei denn, es gibt einen Fehler in Ihrem Code. Überprüfen Sie die Konsole, um festzustellen, ob dies der Fall ist. –

Antwort

2

Hier ist nichts mit CSS verbunden.

  • duck ist eine HTML-Klasse.
  • .duck ist ein Klassenselektor.
  • $(".duck") ist ein Funktionsaufruf, der ein jQuery-Objekt zurückgibt (das alle DOM-Elemente im Dokument enthält, die Mitglieder der Klasse zum Zeitpunkt des Aufrufs der Funktion sind).

Sie können den Rückgabewert eines Funktionsaufrufs in einer Variablen speichern.

Eine allgemeine Konvention besteht darin, jQuery-Objekte in Variablen mit Namen zu speichern, die mit $ beginnen.

var $duck = $(".duck"); 
+0

Nicht mein Downvote, aber das OP sagt, dass 'var duck = $ (". Duck"); 'nicht funktioniert, so ist dies unwahrscheinlich, das eigentliche Problem zu lösen. – JJJ

+0

Ich habe Ente als Klasse mit CSS-Elementen gesetzt '.duck { background-image: url ('images/duck.png'); Position: fixiert; Breite: 51,03px; Höhe: 49,21px; Hintergrundgröße: 51.03px 49.21px; Z-Index: 1; links: 100vw; oben: 43vh;} ' Ich versuchte, Ente mit $ Ente zu ersetzen, aber ich habe die gleiche Antwort, alles andere funktioniert, aber die Enten erscheinen nicht und bewegen sich, wie ich sie eingestellt habe. – Musa

Verwandte Themen