Ich schreibe ein JQuery-Plugin für ein Projekt, an dem ich arbeite, das sich von Tabbed-Inhalten auf Desktop-Geräten zu einem Akkordeon auf mobilen Geräten entwickelt. Ich habe JQuery Boilerplate ( Ссылка ) als eine Initiale verwendet Muster für mein Plugin.
Das Plugin wird für jedes Element mit der Klasse ".tabs2accordion" wie hier gezeigt aufgerufen:
%Vor%Das Plugin funktioniert wie erwartet, wenn nur ein Element mit der Klasse ".tabs2accordion" auf einer Seite vorhanden ist, aber eine Fehlfunktion beginnt, sobald ein anderes Element derselben Klasse zur Seite hinzugefügt wird. Ich habe einen Codepen des Basiscodes erstellt, um das Problem zu demonstrieren. Um das Problem zu zeigen, klicken Sie bei einer Fenstergröße von & gt; 768px auf einen der Titel und beobachten Sie, wie sich der Inhalt darunter ändert, wenn auf den jeweiligen Titel geklickt wird. Als Nächstes entfernen Sie den HTML-Block und versuchen Sie, erneut auf die Titel zu klicken.
Ich habe versucht, jedes Element mit der Klasse "tabs2accordion" wie folgt zu durchlaufen:
%Vor%Aber das hat das Problem auch nicht behoben.
Irgendwelche Ideen?
Ich habe jQuery Boilerplate nicht verwendet, aber ich glaube, dass das Problem hier mit Ihrer Variablen namens plugin zusammenhängt.
Nirgends in Ihrem Code deklarieren Sie eine Variable namens plugin . Wenn ich den Debugger in Plugin.prototype.showTabContent stoppe, kann ich window.plugin auswerten und es gibt den globalen Wert für das Plugin zurück.
Im Konstruktor für Plugin lautet die erste Zeile plugin= this; . Da plugin nicht definiert ist, wird die Variable im globalen Bereich für das Objekt window deklariert.
Das Problem besteht darin, beim Einrichten des Hoops plugin einen Verweis auf das Objekt $().on() zu übergeben. Die übergebenen Daten sind in den Ereignisprozeduren über den Parameter event verfügbar, der in der Eigenschaft data übergeben wird.
Hier ist die Lösung (in Ссылка )
%Vor%Ich habe Ihren Code nach jQuery's Plugin creation standard umgeschrieben.
Grundsätzlich habe ich zwei Dinge getan:
.active -Klasse verwendet) this überallhin, da es eine ganze Welle von verbindlichen Problemen mit sich bringt ... $.fn.tabs2Accordion durchläuft alle Selektoren und wendet $.tabs2Accordion an. Es gibt auch den Selektor für die Verkettung zurück (es ist ein Standard in jQuery).
Dann sind alle internen Methoden Funktionsausdrücke, die sich im selben Umfang wie alle Ihre alten this "Variablen" befinden. Dies vereinfacht den Code erheblich, da Sie auf diese Variablen verweisen können, ohne sie als Parameter oder ohne .bind( this ) irgendwie zu übergeben.
Schließlich ist die alte init() -Funktion verschwunden. Stattdessen lege ich den Code am Ende der Funktion $.tabs2Accordion ab.
Hoffe, das hilft!
%Vor%Tags und Links javascript jquery jquery-plugins jquery-boilerplate