让用户在黑暗和明亮模式之间进行选择(是否保存每页设置，Cookie?) [英] Let the user choose between dark and light mode (save settings for every page, cookies?)

问题描述

我最近才刚开始使用javascript和jQuery，所以我不是专家，而现在我正为所谓的基本任务"而苦苦挣扎?

I have just recently started using javascript and jQuery so I'm not an expert and at the moment I am struggling with what I guess could be called a "basic task"?

我想在主页上包括两个按钮，用户可以使用它们将网站模式设置为暗或亮.用户进入网站并单击其他链接时，应记住这些设置.

I want to include two buttons on the homepage with which the user can the website mode to either dark or light. These settings should then be remembered as the user enters the website and clicks on the different links.

到目前为止，我已经添加了更改背景颜色和字体onClick的颜色的功能，但是我只能在当前页面上进行操作.

So far I have added the function that changes the background color and color of the font onClick but I can only do that on the current page.

我认为我必须以某种形式使用Cookie..

I assume I have to use cookies in some form..?

这是我的小提琴: http://jsfiddle.net/sqn47kmt/10/和这是我的代码

Here is my fiddle: http://jsfiddle.net/sqn47kmt/10/ and heres my code

$(document).ready(function($) {
  $(".darkmode").click(function() { // darkmode for basic body, adds css styles on click
    $("html").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for headline body, adds css styles on click
    $("h3").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for links, adds css styles on click
    $("a").addClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for basic body, removes css styles on click
    $("html").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for headlines, removes css styles on click
    $("h3").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for links, removes css styles on click
    $("a").removeClass("darkclass");
  });
});

推荐答案

首先，对同一元素上的同一事件使用多个重复的事件处理程序是完全多余的.您可以将所有逻辑放在单个处理程序中.就是说，将类分别添加到JS中的那些元素不是一个好主意，因为它过于紧密地将UI和JS联系在一起.

Firstly, having multiple repeated event handlers for the same event on the same element is completely redundant. You can place all the logic in a single handler. That said, it's not a great idea to individually add the classes to those elements in JS as it ties the UI and JS too closely.

一个更好的主意是更改您的JS逻辑，以便仅在 body 上设置该类.然后，您可以根据该正文类简单地修改所有相关元素的CSS.这样，您只需要修改CSS即可更改暗模式"的用户界面.

A better idea would be to change your JS logic so that it only sets the class on the body. Then you can simply amend the CSS for all relevant elements based on that body class. That way you only ever need to amend the CSS to change the UI for the 'dark mode'.

要保存状态，可以使用cookie或localStorage，然后在页面加载时从中读取.下面的示例使用localStorage，但是cookie的模式是相同的.

To save the state you can use a cookie or localStorage and then read from that when the page loads. The example below uses localStorage, but the pattern for cookies is identical.

$(document).ready(function($) {
  var mode = localStorage.getItem('mode');
  if (mode) 
    $('body').addClass(mode);

  $(".darkmode").click(function() {
    $("body").addClass("darkclass");
    localStorage.setItem('mode', 'darkclass');
  });

  $(".normalmode").click(function() {
    $("body").removeClass("darkclass");
    localStorage.setItem('mode', null);
  });
});

body.darkclass h3,
body.darkclass a {
  background-color: black;
  color: white;
}

> 工作示例

这篇关于让用户在黑暗和明亮模式之间进行选择(是否保存每页设置，Cookie?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！