Tetapkan kiraan item karusel berdasarkan nilai localStorage yang disimpan menggunakan TailwindCSS dan Flowbite

Question

Tambah karusel pada halaman saya menggunakan TailwindCSS dan Flowbite. Saya juga menambah elemen suis togol yang pada asasnya membolehkan saya mengitar antara dua item dalam karusel (ditanda = slaid 2, dinyahtanda = slaid 1).

Ini berfungsi - di mana saya tersekat cuba menetapkan togol itu kepada "Slaid 2" semasa dimuatkan berdasarkan nilai yang disimpan dalam localStorage.

Saya telah mengesahkan bahawa nilai LocalStorage saya sedang disimpan/diambil dengan betul (sebagai rentetan "ya" dan "tidak"). Saya kemudian cuba menetapkan karusel kepada slaid 1 (nilai "tidak") atau slaid 2 (nilai "ya") semasa dimuatkan, tetapi tidak kira apa yang saya cuba, ia sentiasa menunjukkan slaid 1.

Saya mencuba kaedah "slideTo()" dan "next()" tetapi kedua-duanya nampaknya tidak berkesan (ia berfungsi dalam acara perubahan tetapi tidak dalam fungsi pemuatan saya).

Tiada ralat dalam konsol. Seperti yang saya katakan, suis berfungsi dengan baik selepas halaman dimuatkan dan kitaran antara slaid dengan betul, ia tidak menetapkan slaid yang betul apabila halaman dimuatkan (jadi slaid yang dipaparkan tidak sepadan dengan tetapan suis yang tepat).

Dokumentasi karusel aliran: https://flowbite.com/docs/components/carousel/

Ini kod saya:

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

Anda menukar sifat yang dipilih secara pengaturcaraan, ini tidak akan mencetuskan peristiwa perubahan. Memandangkan peristiwa perubahan tidak dipecat, pendengar acara tidak dipanggil.

Satu cara untuk mencetuskan peristiwa perubahan:

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

Jadi dalam kod anda ia akan menjadi:

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)
}