时间戳

首页 > 解决方案 > LocalStorage addClass 多值

javascript - LocalStorage addClass 多值

问题描述

我几乎可以得到我想要的东西，但问题就在这里。首先，添加了点击类功能，并将其保存在本地存储中。在这里，我已经实现了，但唯一的问题是我想保存多次点击，所以当我点击一个时，第一个 div 是活动的，其他的被删除，当点击两个时，第二个 div 是活动的，其他（一和三）从活动中移除。当我同时单击一个和两个时，我希望两者都处于活动状态并将其保存在 json 本地存储中。

这是我的jsfiddle

$(document).ready(function() {
  $('.relative_holder').click(function(e) {
    e.preventDefault();
    var $nextDiv = $(this).closest('.list-content-single');

    var $divs = $('.list-content-single').removeClass('visitednw');

    if (!$nextDiv.length)
      $nextDiv = $divs.first();

    $nextDiv.addClass('visitednw');
    localStorage.setItem("activeDiv", $nextDiv.index('.list-content-single'));
  });

  var activeIndex = localStorage.getItem("activeDiv");
  if (activeIndex)
    $('.list-content-single').removeClass('visitednw').eq(activeIndex).addClass('visitednw')
});

.visitednw {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="list-content-single" id="first">
  <h1> first div</h1>
  <a class="relative_holder" href="#" id="btn-first">
    One
  </a>
</div>

<div class="list-content-single" id="second">
  <h1> second div</h1>
  <a class="relative_holder" href="#" id="btn-second">
    Two
  </a>
</div>

<div class="list-content-single" id="third">
  <h1> third div</h1>
  <a class="relative_holder" href="#" id="btn-third">
    Three
   </a>
</div>

标签： javascriptjquery

解决方案

您需要设置并获取 localStorage 的索引数组，并将类设置为正确的列表项。

由于 localStorage 仅支持字符串，您可以使用

localStorage.setItem("activeIndices", JSON.stringify(activeIndices));

和

JSON.parse(localStorage.getItem("activeIndices"));

我在这里做了一个更新的小提琴 。

推荐阅读