让切换类保留给网站的任何查看者

Getting toggleClass to remain for any viewer of the site

本文关键字：任何查 网站 保留      更新时间：2023-09-26

如何让 toggleClass 保存并保留给网站的任何查看者？这是一个非工作示例：

https://jsfiddle.net/715j94gL/3/

    $(function(){
        $(".worker").click(function(){
            $(this).toggleClass("active");        
        }); 
        });

我想过使用 cookie，但这只会在他们的计算机上保存网站的一个查看者。

任何帮助将不胜感激。谢谢！

据我所知，您在这里有两个选择 - 两者都有一些陷阱。

数据库

将元素的当前类存储在数据库中。对于访问您网站的每个查看器，请从所述数据库中加载该类。使用带有计时器的 ajax 从数据库中检索类，如果你想"实时"更新它。

http://www.formget.com/insert-data-in-database-using-php/

阿贾克斯

将当前类存储在文本文件中（如果要为多个元素（例如每个同事）存储多个值，则以 JSON 格式存储数据将使其更易于检索和保存）。与上面完全相同 - 可能不是首选方法（但值得一提，因为我想这是一种可能性）。

http://api.jquery.com/jquery.getjson/http://www.sitepoint.com/ajaxjquery-getjson-simple-example/

陷阱

您的用户将"争夺"元素的类。想象一下，如果您有 5 到 10 个人在直播时同时切换课程。这会让人分心。只是需要注意的事情。

除非您向服务器发送一些请求并将所述变量保存到服务器端变量（如会话），否则无法实现：

$(function(){
    $(".worker").click(function(){
        $(this).toggleClass("active"); 
        $.get('setState.aspx?' + $(this).hasClass('active')?"1":0");       
    }); 
    });

一种方法是创建一个这样的 JSON 文件：

{"employees" : {
    "name": "Bob",
    "needsWork": false
    }
}

单击该按钮时，让 jquery 更新员工的"needsWork"属性。当页面加载时，使用 $.getJSON 对 json 进行 ajax，并根据 "needsWork" 是否为 true 来设置类。

相关文章：