Ich versuche, ein JQuery-Plugin mit dem Namen grid2carousel zu schreiben, das einige Inhalte in einem Bootstrap-Gitter auf Desktop-Geräten aufnimmt und auf kleineren Bildschirmen zu einem Karussell wird.
Das Plugin funktioniert einwandfrei, wenn es die einzige Instanz auf einer Seite ist, aber es treten Probleme auf, wenn es mehrere gibt. Ich habe hier einen Codepen erstellt, um das Problem zu demonstrieren:
Versuchen Sie, eine der Komponenten im HTML-Abschnitt des Codepens auszukommentieren, indem Sie die Größe des Browsers ändern, bis er zu einem Karussell wird, und wiederholen Sie diesen Vorgang dann erneut mit dem Kommentar
Das Plugin funktioniert, indem es jedes Mal eine interne Funktion namens SetupPlugin ausführt, wenn die Browserbreite unter einem in einem Datenattribut im HTML angegebenen Haltepunkt liegt. Wenn die Browserbreite diesen Haltepunkt überschreitet, kehrt eine Funktion namens DestroyPlugin den HTML-Code in seinen ursprünglichen Zustand zurück. Wie so:
%Vor%Unten ist mein Plugin-Code in seiner Gesamtheit. Könnte mir jemand einen Hinweis geben, was ich hier falsch mache?
%Vor%Vielen Dank,
James
Bitte überprüfen Sie Zeile 30 in Ihrem Plugin-Code, es sieht so aus, als hätten Sie vergessen, das Schlüsselwort var hinzuzufügen, anstatt lokale Variablen zu erstellen, um die Funktionen setupPlugin, destoryPlugin und so weiter zu speichern erstellt globale Variablen und dann jede neue Initialisierung Ihres Plugins überschreibt diese Funktionen, um auf einen neu erstellten Schieberegler zu zeigen.
%Vor%sollte
sein %Vor%Aktualisierter Code hier .
Tags und Links javascript jquery jquery-plugins multiple-instances