在页面刷新后记住本地存储中的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

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

感谢

来源

2016-08-19 ronilondon

你设法让localStorage.getItem（ 'hdnvalue'）是否正确？这个'$（'tr。'+ 1）'是否按预期找到了元素？另外，为什么'alert（localStorage.getItem（'hidden'））;'？这应该提醒null，对吧？ – mkaran

@mkaran，是的，我得到的隐藏的getitem值，对不起，它的一个错误，我现在正在纠正 – ronilondon

您可以请你张贴您的HTML样本？ – mkaran

你的代码似乎工作：

$(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')); 
     }  
    } 
    }); 
} 
//});

http://jsfiddle.net/ctuq3z1o

来源

2016-08-19 11:59:33

我使用当前的Chrome浏览器，控制台错误显示 - 'VM1383：5 Uncaught TypeError：无法读取属性'removeAttribute'空' – ronilondon

虽然我是动态获得类值，但是当我添加警报（'tr。'+ lvl）时，我获得始终相同的值，任何建议 – ronilondon

嗨昆汀，我的问题是获取所有时间相同的表行值，我该如何改变这一点，因为我需要隐藏隐藏行的地方，谢谢 – ronilondon

localStorage的用法当前的代码执行应该工作：

localStorage.setItem('hdnvalue', 'hidden');

刷新页面，然后：

localStorage.getItem('hdnvalue') \\hidden

localStorage.getItem('hdnvalue') == 'hidden' \真正

来源

2016-08-19 11:49:27 zubair1024

对不起，这没有工作 – ronilondon

在页面刷新后记住本地存储中的toggleClass状态JQuery

回答

相关问题