Question

我在页面上有一个切换器，用于向body标签添加/删除类。单击“夜晚”，将“夜晚”课程添加到正文，删除“白天”课程，反之亦然。我也希望将其存储在localStorage中，以便在有人离开页面导航并返回相关类时仍将其添加到正文中。我快要工作了。但是，当您返回页面并切换类时，您需要刷新页面以更改类。还要看我的代码，似乎有点长。我确定是否可以缩小并更好地执行。这就是我所拥有的。

HTML

<div class="switcher">
    <p class="day active">Day</p>
    <p class="night">Night</p>
</div>

jQuery

$(".night").click(function(){
    localStorage.setItem('screenModeNightTokenState', 'night');
});

$(".day").click(function(){
    localStorage.setItem('screenModeNightTokenState', 'day');
}); 

if(localStorage.getItem('screenModeNightTokenState') == 'night') {
    $("body").addClass("night");
    $("body").removeClass("day");
}

if(localStorage.getItem('screenModeNightTokenState') == 'day') {
    $("body").addClass("day");
    $("body").removeClass("night");
}

$('.day').click(function() {
    $("body").addClass("day");
    $("body").removeClass("night");
    $(".switcher .day").addClass("active");
    $(".switcher .night").removeClass("active");
});

$(".night").click(function(){
    $("body").addClass("night");
    $("body").removeClass("day");
    $(".switcher .night").addClass("active");
    $(".switcher .day").removeClass("active");
});

这是一个jsFiddle：https://jsfiddle.net/arvmtz04/

Answer 1

问题是因为您向body元素添加了与p元素相同的类来切换状态。您可以通过使这些切换器的选择器更具限制性来解决此问题。 p.night。

还请注意，因为您已将两个事件处理程序分别附加到可以合并的切换，所以可以使代码更简洁。您还可以仅使用一个类来设置“夜间”状态，并将“白天”状态设置为默认状态。试试这个：

<div class="switcher">
  <p class="day active">Day</p>
  <p class="night">Night</p>
</div>

jQuery(document).ready(function($) {
  if (localStorage.getItem('screenModeNightTokenState') == 'night') {
    $("body").addClass("night");
  }

  $('.day').click(function() {
    localStorage.setItem('screenModeNightTokenState', 'day');
    $("body").removeClass("night");
    $('.switcher p.active').removeClass('active');
    $(this).addClass('active');
  });

  $(".night").click(function() {
    localStorage.setItem('screenModeNightTokenState', 'night');
    $("body").addClass("night");
    $('.switcher p.active').removeClass('active');
    $(this).addClass('active');
  });
});

.switcher p {
  cursor: pointer;
}

.switcher .active {
  font-weight: bold;
}

body {
  background-color: #d2f4f7;
}

body.night {
  background-color: #5c3b1b
}

Working example-由于SO代码段不允许访问localStorage

，因此本示例的工作很简单。

Answer 2

我认为我已经解决了这个问题。很多问题似乎是因为我为切换器使用了相同的类，并且该类已添加到主体中。我刚刚更改了switcher p类，它似乎起作用了。尽管我敢肯定有一种更简洁的方式编写此代码。

addClass / removeClass并保存在localStorage中

2 个答案: