在页面刷新后记住本地存储中的toggleClass状态JQuery
我试图在页面刷新/页面加载后保持toggleClass
的值。但它不起作用。我有一个分级表,在单击时切换行。我使用localStorage
来保留切换值,但当页面刷新时,它不记得以前的状态。在页面刷新后记住本地存储中的toggleClass状态JQuery
我的单击事件是 -
$('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 demo
如果我隐藏任何行并单击刷新,它不会记住切换状态。我的代码有什么问题。
感谢
你的代码似乎工作:
$(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/
也许是浏览器使用的是犯规支持存储API
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
你在控制台中的一些错误?
编辑
这里是代码固定:
//$(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'));
}
}
});
}
//});
我使用当前的Chrome浏览器,控制台错误显示 - 'VM1383:5 Uncaught TypeError:无法读取属性'removeAttribute'空' – ronilondon
虽然我是动态获得类值,但是当我添加警报('tr。'+ lvl)时,我获得始终相同的值,任何建议 – ronilondon
嗨昆汀,我的问题是获取所有时间相同的表行值,我该如何改变这一点,因为我需要隐藏隐藏行的地方,谢谢 – ronilondon
localStorage的用法当前的代码执行应该工作:
localStorage.setItem('hdnvalue', 'hidden');
刷新页面,然后:
localStorage.getItem('hdnvalue') \\hidden
localStorage.getItem('hdnvalue') == 'hidden'
\真正
对不起,这没有工作 – ronilondon
你设法让localStorage.getItem( 'hdnvalue')是否正确?这个'$('tr。'+ 1)'是否按预期找到了元素?另外,为什么'alert(localStorage.getItem('hidden'));'?这应该提醒null,对吧? – mkaran
@mkaran,是的,我得到的隐藏的getitem值,对不起,它的一个错误,我现在正在纠正 – ronilondon
您可以请你张贴您的HTML样本? – mkaran