在页面刷新时让几个按钮保持活动状态吗？

I_Literally_Cannot

我一直在为一个班级项目的表工作一段时间，并且工作得很好（由于我在这里找到了很多贡献）

重新加载页面时，我无法使按钮保持活动状态。我使用jQuery，并与工作localStorage和sessionStorage相当多的无果而终。任何帮助将不胜感激！

这是代码段：

  function toggle(event) { //this is what happens when you click on a button
      $(this).toggleClass('active'); //adds an "active" class (color changes)
      sessionStorage.setItem("activeDiv", $(this).index('.btn')); //i need help with this
    }
    $(function() {
        "use strict";
        $(".btn").on("click ", toggle); // you can set the buttons active or not
          var activebtn = sessionStorage.getItem("activeDiv"); 
          if (activebtn) {                                      //I need help with this
            $('.btn').toggleClass('active').eq(activebtn).toggleClass('active');
          }
        });

table,
tr,
td {
  background-color: #a3bfd9;
  border: solid 2px #41403E;
  border-collapse: collapse;
}

.btn {
  vertical-align: top;
  background-color: #ebd3eb;
  border-color: #93e2ff;
  font-size: 10px;
  width: 100px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
}

.btn:hover {
  background-color: #93e2ff;
  opacity: 0.7;
  /*color: #5fc0e3;*/
  border-color: #5fc0e3;
  transition: 0.3s;
}

.btn.active {
  background-color: #899c30;
  color: #fff;
  border-color: #005fbf;
  transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="obsimotable">
  <table>
    <tr>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="5">Some class 5op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="13">Some class 13op</button>
        <br>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="5">Some class 5op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="6">Some class 6op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="6">Some class 6op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="4">Some class 4op</button>
        <br>
        <button class="btn" value="4">Some class 4op</button>
        <br>
      </td>
      <td>
        <button class="btn" value="3">Some class 3op</button>
        <br>
      </td>
    </tr>
  </table>

先生先生

正如我在较早的评论中所说的那样，一种方法是使用，JSON.stringify并且JSON.parse需要存储多个值（多个按钮），但是本地（和会话）存储仅允许保存字符串。

代码带有注释，因此应该很容易理解发生了什么。

function toggle(event) {

  let btnIndex = $(this).index('.btn');
  let activeButtons = [];

  if (!sessionStorage.getItem("activeButtons")) {

    // Session storage item doesn't exist yet -> Create it
    sessionStorage.setItem("activeButtons", JSON.stringify(activeButtons));
  }

  // Get active buttons from session storage
  activeButtons = JSON.parse(sessionStorage.getItem("activeButtons"));

  if ($(this).hasClass('active')) {

    // Button has active class -> Remove from activeButtons array
    var index = activeButtons.indexOf(btnIndex);
    if (index !== -1) activeButtons.splice(index, 1);

  } else {

    // Button doesn't have active class -> Push to activeButtons array
    activeButtons.push(btnIndex);
  }

  // Toggle active class
  $(this).toggleClass('active');

  // Set items in session storage
  sessionStorage.setItem("activeButtons", JSON.stringify(activeButtons));
}

$(function() {

  //sessionStorage.clear(); // Uncomment this line to clear session storage

  $(".btn").on("click ", toggle);

  // Load active buttons
  let activeButtons = JSON.parse(sessionStorage.getItem("activeButtons"));

  if (activeButtons.length) {

    // Loop through active buttons
    for (var i = 0; i < activeButtons.length; i++) {

      // Add active class for each active button
      $('.btn').eq(activeButtons[i]).addClass('active');
    }
  }
});

这是工作中的小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。