下拉式过滤器的Javascript帮助

Question

我能够在*上找到一个solution，它显示基于过滤器的HTML“li”元素（请参阅附件）。基本上基于HTML元素中定义的CSS类，它填充下拉列表，您可以从中选择。

我想在下面修改javascript，以便在导航到“li”元素页面之一时（如此处所示：https://jsfiddle.net/quwfmepL/2/ eg注意：选择一个Test1元素并转到page1.html页面）。但当您将page1.html上的后退按钮放到过滤器所在的页面时，它不会记得上次过滤器的选择。像现在这样，您需要再次过滤相同的选择。我认为我需要做的是查看浏览器历史记录，但不确定是否有更简单的选项。我希望它可以是查询字符串或类似的格式。

<script type="text/JavaScript"> 
$(document).ready(function() { 
    var $tagList = $('#tag-list'), 
     optionArr = []; 
    $("#demo-list li a").each(function(index, item) { 
    $.each($(this).attr('class').split(' '), function(i, option){ 
     if ($.inArray(option, optionArr) == -1) { 
     $tagList.append('<option value="'+option+'">'+option.replace('-', ' ').replace('_', ' ')+'</option>'); 
     optionArr.push(option); 
     } 
    }); 
    }); 
    // Look at the URL for filter and modify here # 
    $tagList.on('change', function() { 
    var selection = $tagList.val(); 
    if (selection == "all") { 
     $('#demo-list li a').show(); 
    } else { 
     $('#demo-list li a').hide(); 
     $('#demo-list li a.'+selection).show(); 
    } 
    }); 
}); 
</script> 

任何建议或提示？任何帮助表示赞赏。

Answer 1

小提琴行事有点怪异（不工作），对我来说。

您可能只想在.change函数中设置一个cookie，这可能是最简单的方法。加载过滤器页面时，检查是否设置了cookie，如果是，则根据存储的cookie值运行过滤器。

试用：https://github.com/js-cookie/js-cookie

或者，甚至可能更好，你可以使用webstorage（localStorage的）来完成同样的事情。

http://www.w3schools.com/html/html5_webstorage.asp