jQuery-Plugin wird nur auf das zuletzt deklarierte Element angewendet

Question

Ich habe ein jQuery-Plugin geschrieben, um Animationen für mehrere Bilder auf derselben Seite zu steuern. Die Aufrufe werden am Anfang wie folgt initialisiert:

$ ("# image1") .ims ({top: "240px", links: "300px"});

$ ("# image2") .ims ({oben: "160px", links: "430px"});

Das Anims-Plugin verwendet im Wesentlichen eine Reihe von Animationen auf MouseOver und MouseOut (mit Hover) basierend auf den oberen und linken Parameter geliefert. Sobald jedoch alles in Safari geladen ist, bewirkt die Mausbewegung über # image2, dass # image1 mit den für # image2 festgelegten Parametern animiert wird. Mauszeiger über # image1 animiert # image1, so wie es sein sollte, mit den für # image1 eingestellten Parametern, so wie es sein sollte. In Firefox ist das Gegenteil der Fall. Ich denke, es hat etwas mit der Reihenfolge zu tun, in der sie geladen wurden oder so.

Was könnte ich falsch gemacht haben? Ich benutze $ (this) im ganzen Plugin für die animate() und andere verschiedene Aufrufe.

Answer 1

ich verdoppeln würde all die Aufzählungszeichen auf dieser Seite überprüfen. http://docs.jquery.com/Plugins/Authoring

• Benennen Sie Ihre Datei jquery [Name des Plug-in] Js, zum Beispiel. jquery.debug.js
• Alle neuen Methoden sind dem Objekt jQuery.fn zugeordnet, alle Funktionen für das Objekt jQuery.
• Innerhalb von Methoden ist 'this' eine Referenz auf das aktuelle Objekt jQuery .
• Alle Methoden oder Funktionen, die Sie durch ein Semikolon anhängen müssen (;) am Ende - sonst wird der Code brechen, wenn komprimiert.
• Ihre Methode muss das jQuery-Objekt zurückgeben, sofern die explizite Angabe nicht explizit ist.
• Sie sollten this.each verwenden, um über den aktuellen Satz der übereinstimmenden Elemente zu iterieren - es produziert sauberen und kompatiblen Code auf diese Weise.
• Verwenden Sie immer jQuery anstelle von $ in Ihrem Plugin-Code - das ermöglicht Benutzer den Alias ​​für jQuery an einem einzigen Ort zu ändern. Siehe unten für eine Erklärung und eine elegantere Lösung.

Zum Beispiel sagen, Sie $(this) verwenden, aber Sie sollten jQuery(this) verwendet werden. Ich bezweifle, dass das das Problem ist, aber Sie sollten der Dokumentation genau folgen, nur für den Fall, dass einige unerwartete Verhaltensweisen verursacht werden, indem Sie einer von ihnen nicht folgen. Gibt das jQuery-Objekt zurück?

Darüber hinaus müssen Sie wirklich die Quelle Ihres Anims-Plugins veröffentlichen, damit wir versuchen können, zu sehen, was falsch sein könnte.

Answer 2

Ich löste mein Problem. In meinem Plugin schrieb ich:

img = $ (this);

und dann die Variable img verwendet, um alles danach zu steuern.Ändern zu:

var img = $ (this);

löste meine Probleme. Dummer Fehler.

Answer 3

Sie könnten auch this article finden, die häufig auftretende JavaScript-Probleme erklärt, wenn eine Aktion nur auf das letzte Element der Auswahl/des Arrays angewendet wird oder Sie die letzte ID/das letzte Attribut Ihrer Auswahl erhalten.