jquery - addClass/removeClass 并保存在 localStorage 中

Question

我在页面上有一个切换器，用于向正文标记添加/删除类。单击“夜间”，“夜间”类将添加到正文中，“白天”类将被删除，反之亦然。我还希望将其存储在 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

问题是因为您将与在 p 元素上使用的相同类添加到 body 中来切换状态。您可以通过使这些切换的选择器更具限制性来解决此问题，即。 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 - 这个例子在 fiddle 中工作，因为SO片段不允许访问localStorage