Legen Sie die Anzahl der Karussellelemente basierend auf dem gespeicherten localStorage-Wert mithilfe von TailwindCSS und Flowbite fest

Question

Fügen Sie mit TailwindCSS und Flowbite ein Karussell zu meiner Seite hinzu. Ich habe außerdem ein Kippschalterelement hinzugefügt, mit dem ich grundsätzlich zwischen den beiden Elementen im Karussell wechseln kann (aktiviert = Folie 2, deaktiviert = Folie 1).

Das funktioniert – ich blieb beim Versuch hängen, diesen Schalter beim Laden basierend auf dem in localStorage gespeicherten Wert auf „Folie 2“ zu setzen.

Ich habe überprüft, dass meine localStorage-Werte korrekt gespeichert/abgerufen werden (als „Ja“- und „Nein“-Zeichenfolgen). Ich habe dann versucht, das Karussell beim Laden auf Folie 1 („Nein“-Wert) oder Folie 2 („Ja“-Wert) einzustellen, aber egal was ich versuchte, es zeigte immer Folie 1.

Ich habe die Methoden „slideTo()“ und „next()“ ausprobiert, aber keine scheint zu funktionieren (sie funktionieren im Änderungsereignis, aber nicht in meiner Ladefunktion).

Keine Fehler in der Konsole. Wie gesagt, der Schalter funktioniert einwandfrei, nachdem die Seite geladen wurde und korrekt zwischen den Folien wechselt. Beim Laden der Seite wird nur nicht die richtige Folie eingestellt (die angezeigte Folie stimmt also nicht mit den genauen Einstellungen des Schalters überein).

Dokumentation zum Flowbite-Karussell: https://flowbite.com/docs/components/carousel/

Das ist mein Code:

window.addEventListener('load', function () {
    show_loader("service-suspended-container");

    // Sidebar Toggle Defaults and Handler
    const exclude_suspended_toggle = document.getElementById('exclude-suspended-toggle');

    // Determine which slide to display based on user's preference
    var starting_item = 0;
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        starting_item = 1;
    }
    
    const carousel_items = [
        {
            position: 0,
            el: document.getElementById('carousel-item-1')
        },
        {
            position: 1,
            el: document.getElementById('carousel-item-2')
        }
    ];

    const options = {
        defaultPosition: starting_item
    }

    // Carousel object for controlling slide
    var carousel = new Carousel(carousel_items, options);

    // Ecclude suspended toggle handler
    exclude_suspended_toggle.addEventListener('change',  (event) => {
        console.log("Event fired");
        if (event.currentTarget.checked) {
            // Make toggle checked
            console.log("Toggle now checked");
            localStorage.setItem('metrics-exclude-suspended', 'yes');
            carousel.slideTo(1);
        } else {
            // Uncheck toggle
            console.log("Toggle now unchecked");
            localStorage.setItem('metrics-exclude-suspended', 'no');
            carousel.slideTo(0);
        }
    });

    // Determine default check state of toggle and slide from user's preferences
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        console.log("enabled from storage...");
        // Make toggle checked
        exclude_suspended_toggle.checked = true;
        carousel.slideTo(1);
    } else {
        console.log("disabled from storage...");
        // Uncheck toggle
        exclude_suspended_toggle.checked = false;
        carousel.slideTo(0);
    }
});

Answer 1

您正在以编程方式更改选中的属性，这不会触发更改事件。由于未触发更改事件，因此不会调用事件侦听器。

触发更改事件的一种方法：

const changeEvent = new Event("change")
exclude_suspended_toggle.dispatchEvent(changeEvent)

因此，在您的代码中，它将变为：

const changeEvent = new Event("change")

// Determine default check state of toggle and slide from user's preferences
if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
    console.log("enabled from storage...");
    // Make toggle checked
    exclude_suspended_toggle.checked = true;
    exclude_suspended_toggle.dispatchEvent(changeEvent)
} else {
    console.log("disabled from storage...");
    // Uncheck toggle
    exclude_suspended_toggle.checked = false;
    exclude_suspended_toggle.dispatchEvent(changeEvent)
}