jQuery记住列表中的toggleClass状态答案

【问题标题】：jQuery Remember toggleClass status in listjQuery记住列表中的toggleClass状态
【发布时间】：2021-04-27 01:25:04
【问题描述】：

我有一个函数：

function toggle(event) {
    $(`#${event.target.id}`).toggleClass('fa-power-on fa-power-off');
}

我还有一个按钮列表：

<i id="id1" onclick="toggle($event)"></i>
<i id="id14" onclick="toggle($event)"></i>
<i id="id12" onclick="toggle($event)"></i>
<i id="id17" onclick="toggle($event)"></i>
<i id="id18" onclick="toggle($event)"></i>
<i id="id1w" onclick="toggle($event)"></i>

我需要记住每个 toggleClass 图标的状态。

通过 localStorage 或 id 和状态都在一个对象中，然后保存在 localstorage 或其他上。

<i></i> 列表是动态的，因此我无法对其进行硬编码。

我该怎么做？

【问题讨论】：

旁注：$(#${event.target.id}) 应该与$(event.target) 相同，这样写起来更容易、更清晰！
你试过使用 localStorage.setItem 吗？
您可以使用数据属性来记住您的图标。这比在 localStorage 上管理要容易。

标签： javascript jquery local-storage

【解决方案1】：

考虑以下示例。

$(function() {
  function toggle(el) {
    $(el).toggleClass("fa-power-on fa-power-off");
  }

  function getPowerStatus(selector) {
    var results = [];
    $(selector).each(function(i, el) {
      var key = $(el).attr("id");
      var val = $(el).hasClass("fa-power-on");
      var item = {};
      item[key] = val;
      results.push(item);
    });
    return results;
  }

  function saveStatus(stats) {
    localStorage.setItem("status", JSON.stringify(stats));
  }

  function getStatus() {
    return JOSN.parse(localstorage.getItem("status"));
  }

  $("i[id^='id']").click(function(e) {
    toggle(this);
    var status = getPowerStatus("i[id^='id']");
    console.log(status);
    saveStatus(status);
  });
});

.fa-power-off {}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i id="id1" class="fas fa-power-off"></i>
<i id="id14" class="fas fa-power-off"></i>
<i id="id12" class="fas fa-power-off"></i>
<i id="id17" class="fas fa-power-off"></i>
<i id="id18" class="fas fa-power-off"></i>
<i id="id1w" class="fas fa-power-off"></i>

这创建了用于切换、收集每个状态、设置并将这些状态获取到本地存储的函数。

不确定您使用的是什么图标集，但 Font-Awesome 没有fa-power-on。这意味着你想要切换一个不同的类。

$(function() {
  function toggle(el) {
    $(el).toggleClass("on");
  }

  function getPowerStatus(selector) {
    var results = [];
    $(selector).each(function(i, el) {
      var key = $(el).attr("id");
      var val = $(el).hasClass("on");
      var item = {};
      item[key] = val;
      results.push(item);
    });
    return results;
  }

  function saveStatus(stats) {
    localStorage.setItem("status", JSON.stringify(stats));
  }

  function getStatus() {
    return JOSN.parse(localstorage.getItem("status"));
  }

  $("i[id^='id']").click(function(e) {
    toggle(this);
    var status = getPowerStatus("i[id^='id']");
    console.log(status);
    saveStatus(status);
  });
});

.fa-power-off {
  border-radius: 50%;
}

.fa-power-off.on {
  background: black;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i id="id1" class="fas fa-power-off"></i>
<i id="id14" class="fas fa-power-off"></i>
<i id="id12" class="fas fa-power-off"></i>
<i id="id17" class="fas fa-power-off"></i>
<i id="id18" class="fas fa-power-off"></i>
<i id="id1w" class="fas fa-power-off"></i>

现在您可以点击它们on 或关闭它们。每次单击事件发生时，它都会切换类并更新保存的状态。然后，您可以在页面加载时获取状态，并根据需要重新应用 on 类。

【讨论】：