为什么我的 JS 不更新我的数据主题?

提姆斯克

我想在我的导航栏 ( ul li) 中有一个可以在theme=light之间切换的按钮theme=dark但是,只有激活暗模式才有效。

代码:

我创建了一个<li><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></li>带有 JS 功能的按钮

function darkMode () {
    var isOn = false;
    if(Boolean(isOn) === false) {
        document.documentElement.setAttribute('data-theme', 'dark');
        var isOn = true;
    }
    else if(Boolean(isOn) === true) {
        document.documentElement.setAttribute('data-theme', 'light');
        var isOn = false;
    }
}

我的 css 看起来像这样:

:root, [data-theme="light"] {
  --bg-color: #ffffff;
  --bg-color-inv: #000000;
  --outline-color: #000000;
  --text-primary: #000000;
  --text-primary-inv: #ffffff;
  --text-secondary: #a4a4a4;
  --text-secondary-hover: #000000;
  --chivo: 'Chivo', sans-serif;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --bg-color-inv: #ffffff;
  --outline-color: #ffffff;
  --text-primary: #ffffff;
  --text-primary-inv: #000000;
  --text-secondary: #5b5b5b;
  --text-secondary-hover: #ffffff;
}
约瑟夫·图卡钦斯基

1.您可以通过将 设置为isOn启动该功能false所以Boolean(isOn) === false总是回来true你应该isOn在函数外初始化变量

2为什么要转换isOn为布尔值?它已经是布尔类型..

3你真的不需要else if.. 如果它不是假的,那就是真的..

4.正如下面评论中提到的,不需要重新启动isOn内部if else

var isOn = false;

function darkMode () {
    if(!isOn) {
        document.documentElement.setAttribute('data-theme', 'dark');
        isOn = true;
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        isOn = false;
    }
}

以更优雅的方式,您可以执行以下操作:

var isOn = false;

function darkMode () {

    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
    isOn = !isOn;

}

解释

+isOn将其转换为数字,因此true成为1false成为0然后你使用这个数字作为索引来选择darklight

isOn=!isOn翻转的当前值isOn-true变得falsefalse成为true

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章