jQuery Remember toggleClass status in list

Question

I have a function:

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

I also have a list of buttons:

I need the status of the toggleClass icon to be remembered for each.

Either by localStorage or id's and status all in an object and then saved on localstorage or other.

The list is dynamic so I cannot hardcode it.

How can I do this?

user_463319 · Answer

Consider the following example.

$(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 {}

This created functions to toggle, gather the status of each, set, and get those status to Local Storage.

Not sure what Icon Set you're using, but Font-Awesome does not have a fa-power-on. Which would mean you'd want to toggle a different 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;
}

Now you can Click them on or off. Each time click event happens, it toggle the class and updates the saved status. You can then get the status when the page loads and re-apply the on class as needed.

jQuery Remember toggleClass status in list

1 Answers