jQuery 记住列表中的 toggleClass 状态

Question

我有一个函数：

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> 列表是动态的，所以我不能对其进行硬编码。

我该怎么做？

Answer 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。这意味着您想要切换不同的 class.

$(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 或关闭。每次发生点击事件时，它都会切换 class 并更新保存的状态。然后，您可以在页面加载时获取状态，并根据需要重新应用 on class。

jQuery 记住列表中的 toggleClass 状态

jQuery Remember toggleClass status in list

javascript

jquery

local-storage