HTML5 LocalStorage-jQuery的簡單問題

Question

我有以下代碼。

當我選擇一個鏈接時，它會從藍色變為紅色- 太好了！
當我刷新頁面時，單擊的鏈接將保持紅色- 太好了！
當我單擊紅色鏈接時，它返回為藍色- 太好了！
但是，當我刷新頁面時，藍色鏈接變為紅色- 不好！

我希望它在刷新時保持藍色。 有人可以幫我這個忙嗎？

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

  <style type='text/css'>
    a {color: blue}
    .active {color:red}
  </style>

<script type='text/javascript'>
$(document).ready(function(){

    $('.filters a').on('click', function() {
        var data_filter = $(this).closest("a").data('filter');
        if($(this).hasClass("active")) {
            $(this).removeClass("active");
            localStorage.setItem(data_filter,true);
        }
        else {
            $(this).addClass("active");
            localStorage.setItem(data_filter,false);
        }
    });

    $('.filters a').each(function(){
        var data_filter = $(this).closest("a").data('filter');
        var checked = localStorage.getItem(data_filter);
        if(checked){
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });

});
</script>


</head>
<body>
  <div class="filters slide-down">

            <ul class="groups inline naked right">

                <li class="group">
                    <h3 class="text-right filter-heading trigger" data-target="#colours_filters">Colour</h3>
                    <ul class="naked" id="colours_filters">
                        <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li>
                        <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li>
                        <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-brown">Brown</a></li>
                        <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-gray">Gray</a></li>
                    </ul>                               
                </li>

                <li class="group">
                    <h3 class="text-right filter-heading trigger" data-target="#theme_filters">Theme</h3>
                    <ul class="naked" id="theme_filters">
                        <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-carefree">Carefree</a></li>
                        <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-decay">Decay</a></li>
                        <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-dramatic">Dramatic</a></li>
                        <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-family">Family</a></li>
                        <li class="filter-option"><a href="#" data-tax="theme" data-filter=".tag-theme-nautical">Nautical</a></li>
                    </ul>

                </li>

                </li>

            </ul>

</body>

</html>

Answer 1

應該是$('.filter-option a') ，而不是$('.filters a') 。
localStorage設置true和false應該改變他們的地方（ true當它是false ，反之亦然）。
if (checked)實際上甚至可以用於false值，因為事實證明， checked是String ，而不是Boolean 。 因此應該是if (checked == 'true')
我還簡化了代碼中的某些地方。

更新小提琴。

$(document).ready(function()
{
    $('.filter-option a').on('click', function()
    {
        var data_filter = $(this).data('filter');
        $(this).toggleClass("active");
        localStorage.setItem(data_filter, $(this).hasClass("active"));
    });

    $('.filter-option a').each(function()
    {
        var data_filter = $(this).data('filter');
        var checked = localStorage.getItem(data_filter);
        if (checked == 'true')
        {
            $(this).addClass('active');
        }
    });
});

HTML5 LocalStorage-jQuery的簡單問題

問題描述

1 個解決方案

解決方案1
2 已采納 2014-09-30 10:13:56

HTML5 LocalStorage-jQuery的簡單問題

問題描述

1 個解決方案

解決方案1 2 已采納 2014-09-30 10:13:56

解決方案1
2 已采納 2014-09-30 10:13:56