Question

我试图进行这种暗模式切换，以便在head中插入样式表并在单击时插入本地存储。它应该在第二次单击时将其禁用，但是问题是，第一次单击时，我会得到on输出，但是从第二次单击起，它会一直一直输出off。

如果页面已经在运行深色主题，我还希望它具有其他条件，该开关将禁用插入的样式表并保持这样的循环。

我愿意接受PHP替代方案。

$(function() {
    var linkDarkMode;
    $(".dark-theme").click(function() {
        if (!linkDarkMode) {
            linkDarkMode = $('<link rel="stylesheet" type="text/css" href="<?= get_template_directory_uri(); ?>/body/dark-theme.css">').appendTo('head')[0];
            localStorage.setItem("theme", "dark");
            console.log("on");
        } else {
            linkDarkMode.disabled = !linkDarkMode.disabled;
            localStorage.removeItem("theme");
            console.log("off");
        }
    });
});

Answer 1

linkDarkMode将在第一次单击后保留该值，因此，每个后续的单击处理程序调用将在else检查失败的情况下进入if块。只需使用另一个isThemeDark之类的布尔值来保持当前主题的状态，并执行此操作

$(function() {
    var linkDarkMode;
    var isThemeDark = false;
    $(".dark-theme").click(function() {
        if (!linkDarkMode) {
            linkDarkMode = $(
                '<link rel="stylesheet" type="text/css" href="<?= get_template_directory_uri(); ?>/body/dark-theme.css">'
            ).appendTo("head")[0];
            localStorage.setItem("theme", "dark");
            console.log("on");
        } else {
            if (isThemeDark) {
                linkDarkMode.disabled = true;
                localStorage.removeItem("theme");
                console.log("off");
            } else {
                linkDarkMode.disabled = false;
                localStorage.setItem("theme", "dark");
                console.log("on");
            }
            isThemeDark = !isThemeDark;
        }
    });
});

希望这会有所帮助！

插入/删除深色主题样式表切换按钮

1 个答案: