页面刷新 JQuery 后记住本地存储中的 toggleClass 状态 [英] Remember toggleClass state in local storage after page refresh JQuery

问题描述

我试图在页面刷新/页面加载后保留 toggleClass 值.但它不起作用.我有一个分层表，单击时会切换行.我正在使用 localStorage 来保留切换值，但是当页面刷新时，它不记得以前的状态.

I am trying to keep the toggleClass value after page refresh/page load. But it is not working. I have a hierarchical table where rows are toggled when clicked. I am using localStorage to retain the toggle values but when page refreshed, it did not remember the previous state.

我的点击事件是 -

$('tr.' + 1).toggleClass('hidden'); // Class value I am getting dynamically
localStorage.setItem('hdnvalue', 'hidden'); 

文档准备就绪 -

$(document).ready(function () {    
    if (localStorage.getItem('hdnvalue') == 'hidden') {
        alert(localStorage.getItem('hdnvalue'));
        $('tr.' + 1).toggleClass('hidden');  // I am getting class value dynamically, here 1 is the class level
    }
});

更新:

HTML 示例 -

<table id="tbl_test">
  <tr class="1">
    <td>Row 1</td>
  </tr>
  <tr class="2">
    <td>Row 1.1</td>
  </tr>
  <tr class="3">
    <td>Row 1.1.1</td>
  </tr>
  <tr class="3">
    <td>Row 1.1.2</td>
  </tr>  
  <tr class="1">
    <td>Row 2</td>
  </tr>
  <tr class="2">
    <td>Row 2.1</td>
  </tr>
  <tr class="3">
    <td>Row 2.1.1</td>
  </tr>
  <tr class="3">
    <td>Row 2.1.2</td>
  </tr>
</table>

更新-JSfiddle 演示

如果我隐藏任何行并单击刷新，它不会记住切换状态.我的代码有什么问题.

If I hide any rows and click refresh, it does not remember the toggle state. What is wrong in my code.

谢谢

推荐答案

你的代码似乎有效:

$(document).ready(function() {
  $('#tg1').click(function() {
    $("#result").html("toggled");
    localStorage.setItem('hdnvalue', 'hidden');
  });

  $('#tg2').click(function() {
    $("#result").html("not toggled");
    localStorage.setItem('hdnvalue', 'another');
  });

  if (localStorage.getItem('hdnvalue') == 'hidden') {
    $("#result").html("toggled");
    $('tr.' + 1).toggleClass('hidden');
  }
});

https://jsfiddle.net/qj7o4zug/

可能你使用的浏览器不支持Storage api

Maybe the browser you are using doesnt support Storage api

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

您是否在控制台中遇到了一些错误?

Did you get some errors in the console ?

编辑

这是修复的代码:

//$(document).ready(function() {
$('#reset').click(function(event) {
  $('tr').each(function(i, el) {
    localStorage['hdn_hiding' + i] = 'show';
  });
});

$('tr').click(function(event) {
  event.stopPropagation();
  var m_indx = $(this).index();
  var currentLevel = parseInt($(this).attr('class')),
    state = $(this).hasClass('hiding'),
    nextEl = $(this).next(),
    nextLevel = parseInt(nextEl.attr('class'));
    debugger;
  while (currentLevel < nextLevel) {
    nextEl.toggle(state);
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }

  var $item = $(this).closest('tr');
  var index = m_indx;

  $item.toggleClass('hiding');
  if ($item.hasClass('hiding')) {
    localStorage.setItem('hdn_hiding' + index, 'hiding');
  } else {
    localStorage.setItem('hdn_hiding' + index, 'show');
  }

});

if (typeof(localStorage) == 'undefined') {
  alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
  $('tr').each(function(i, el) {
    var r = localStorage['hdn_hiding' + i] == 'hiding';
    if (r) {
      var currentLevel = parseInt($(this).attr('class')),
        nextEl = $(this).next(),
        nextLevel = parseInt(nextEl.attr('class'));
      while (currentLevel < nextLevel) {
        nextEl.hide();
        nextEl = nextEl.next();
        nextLevel = parseInt(nextEl.attr('class'));
      }      
    } 
  });
}
//});

http://jsfiddle.net/ctuq3z1o

这篇关于页面刷新 JQuery 后记住本地存储中的 toggleClass 状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！