javascript - 如何在更改页面时保持事件类

Question

我正在尝试向导航项添加一个事件类，具体取决于您所在的页面。我正在使用这个脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $("#side-bar a").click(function () {
            var id = $(this);

            $(id).siblings().find(".active").removeClass("active");
            $(id).addClass("active");
            localStorage.setItem("selectedolditem", id);
        });

        var selectedolditem = localStorage.getItem('selectedolditem');

        if (selectedolditem !== null) {
            $(selectedolditem).siblings().find(".active").removeClass("active");
            $(selectedolditem).addClass("active");
        }
    });
</script>

在此处查看完整的 jsfiddle:https://jsfiddle.net/ebo7hLo9/它添加了事件类，但它加载了一个新页面，它消失了。我做错了什么？

Answer 1

https://jsfiddle.net/ebo7hLo9/10/ - 这是一把 fiddle !

$(document).ready(function () {

            $("#side-bar a").click(function () {
                var id = $(this);

                $(".active").removeClass("active");
                $(id).addClass("active");
                localStorage.setItem("selectedolditem", $(id).text());

            });

            var selectedolditem = localStorage.getItem('selectedolditem');

            if (selectedolditem !== null) {

                $("a:contains('" + selectedolditem + "')").addClass("active");
            }
        });

您的代码在记住要抓取的元素时遇到问题。我认为这是由于网络存储 API 对对象的不熟悉。相反，我从所选元素中获取文本，将其存储在 localStorage 中，并在页面加载时将其与正确的元素匹配。您的代码中还有一部分是处理在所选元素的 siblings() 中查找类“active”并将其删除。那种复杂的代码在很大程度上是不必要的。我将其替换为类选择器 $(".active")

我没有在代码中更改它，但我建议不要使用 localStorage 以支持 sessionStorage 以便存储将在选项卡/浏览器上自行清除关闭。

有关更多信息，请查看之前的 stackoverflow 帖子:Storing Objects in HTML5 localStorage