Question

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

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

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

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

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

$(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");
  });
});

Answer 1

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

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

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

$(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;
}

Working example

Answer 2

您可以使用window.localStorage设置cookie。

$(document).ready(function () {
    //check the button which is clicked
     var darkClick = localStorage.getItem('darkBtnClicked'),
         normalClick =
         localStorage.getItem('normalBtnClicked');

     if (darkClick == "true") {
         console.log('clicked on dark');
         $("html, h3, a, body").addClass("darkclass");
     }
     if (normalClick == "true") {
         console.log('clicked on normal');
         $("html, h3, a, body").removeClass("darkclass");
     }


     //on click of the button add the class we need a nd set the cookies
     $(".darkmode").click(function () {
         //Adding class to all the elements you need in just one line.
         $("html, h3, a, body").addClass("darkclass");
         //setting cookies for the button click
         localStorage.setItem('darkBtnClicked', true);
         localStorage.setItem('normalBtnClicked', false);
     });

     $(".normalmode").click(function () {
         $("html, h3, a, body").removeClass("darkclass");
           //setting cookies for the button click
         localStorage.setItem('normalBtnClicked', true);
         localStorage.setItem('darkBtnClicked', false);
     });
 });

在脚本末尾的jQuery和For cookie后面添加按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

即使您重新加载页面并通过网站重定向页面，此方法也应该起作用。

让用户在黑暗和明亮模式之间进行选择（是否保存每页设置，Cookie？）

2 个答案: