Jquery addClass 不是持久的

Question

我正在 Django 中开发一个 Web 应用程序。我想要一种简单的方法来跟踪用户在网站上的位置。 所以我想我应该改变菜单上点击的项目的CSS。

我添加了这段简单的代码。

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

        $(".up_menu_item").click(function(){
                $(this).addClass("green");
                var excludeThis = $(this);
                $(".up_menu_item").not(excludeThis).each(function(){
                        $(this).removeClass("green");
                });
        });

        });
        </script>

当我单击菜单项时，颜色发生变化，但随后又恢复为默认值。我点击的项目实际上是将用户重定向到另一个网址的标签。但菜单（和 JavaScript）总是包含在调用的 URL 中，所以我认为该类会保留。

我不知道我是否很清楚，但我将不胜感激任何帮助，因为这开始让我发疯！

Answer 1

Javascript 不是合适的工具。正如 Kim 在评论中所说，当您重新加载页面时，您的班级将不再存在。

由于您使用的是 Django，因此执行此操作的方法是在 Django 模板中 - 对于菜单中的每个 url，检查它是否与当前 URL 匹配，如果匹配则添加类。

编辑 假设您已将请求传递到模板中，您可以从 request.path 获取当前 URL（如果您启用了 请求上下文处理器）。

Answer 2

在将类读取到新元素之前从所有元素中删除该类不是更容易吗？

$(".up_menu_item").click(function(){
    $($(this).attr('class')).removeClass();
    $(this).addClass("green");
});

Answer 3

当您转到另一个页面时，使用 Javascript（或自然是 jQuery）应用的所有更改都会消失。页面像平常一样加载。所做的所有更改仅应用于当前显示页面。它不会修改后面的页面。

您可以在页面加载时检查打开的是哪个页面，并更改相应按钮的颜色。如果页面与右侧按钮匹配，最好的方法是使用服务器端编程语言（在您的例子中是带有 Django 框架的 Python）来添加类。