使用TailwindCSS和Flowbite基于保存的localStorage值设置轮播项数量

Question

使用 TailwindCSS 和 Flowbite 将轮播添加到我的页面。我还添加了一个切换开关元素，基本上允许我在轮播中的两个项目之间循环（选中 = 幻灯片 2，未选中 = 幻灯片 1）。

这个可行 - 我陷入困境的是尝试根据 localStorage 中该切换的存储值将其设置为加载时的“幻灯片 2”。

我已验证我的 localStorage 值是否已正确保存/检索（作为“是”和“否”字符串）。然后，我尝试在加载时将轮播设置为幻灯片 1（“否”值）或幻灯片 2（“是”值），但无论我尝试什么，它始终显示幻灯片 1。

我尝试了“slideTo()”和“next()”方法，但似乎都不起作用（它们在更改事件中起作用，但在我的加载函数中不起作用）。

控制台中没有错误。就像我说的，切换在页面加载后工作正常，并在幻灯片之间正确循环，它只是没有在页面加载时设置正确的幻灯片（因此显示的幻灯片与切换的准确设置不匹配）。

Flowbite 轮播文档：https://flowbite.com/docs/components/carousel/

这是我的代码：

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