Question

我正在尝试在我的网站上实现暗模式-亮模式切换器。我对JS真的一无所知，但是我在网上找到了一些代码片段，并做了一些类似的工作。

到目前为止我所拥有的： -我在CSS中有两组颜色，可以在导航栏中的复选框之间进行切换。 -我还发现了如何在本地存储复选框的状态，因此，如果我打开暗模式然后导航到另一页，则该复选框仍处于选中状态。

问题在于，每次我导航到另一个页面时，该复选框都会首先被取消选中，然后它意识到必须对其进行检查，并且会自动对其进行检查。但是要花时间，甚至会有一个动画令人讨厌，因为如果我在某个页面上对其进行检查，则我希望默认情况下在所有其他页面上对其进行检查，直到将其关闭为止。

这里有一段视频可以更好地说明它：https://drive.google.com/file/d/1y48yh1h1bGM6abrthVmtUD8azVuDG4yE/view?usp=sharing

任何帮助将不胜感激，因为我真的不知道这是怎么回事：D

// DARK MODE SWITCHER
var checkbox = document.querySelector('input[name=mode]');

checkbox.addEventListener('change', function() {
  if(this.checked) {
    trans()
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    trans()
    document.documentElement.setAttribute('data-theme', 'light')
  }
})

let trans = () => {
  document.documentElement.classList.add('transition');
  window.setTimeout(() => {
    document.documentElement.classList.remove('transition');
  }, 1000)
}


// SAVE DARK MODE CHECKBOX STATE IN LOCAL STORAGE

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

Answer 1

jsfiddle解决方案：

https://jsfiddle.net/zhbo40ma/

您需要在页面加载时设置主题：

$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
  if($('#'+key).attr('name') == 'mode') {
    if(value) {
        trans();
        document.documentElement.setAttribute('data-theme', 'dark')
    }
    else {
        trans();
        document.documentElement.setAttribute('data-theme', 'light')
    }
  }
});

在页面加载函数导致您用trans()声明它之前，请不要忘记编写您的let函数

暗模式复选框应保存在本地存储中

1 个答案: