将 jquery cookie 添加到内容切换

Question

我使用以下代码来生成一个在单击时打开和关闭的内容区域，并带有一个加号/减号图像，该图像也会根据内容区域的状态进行切换。我想做的是添加一个 jquery cookie 来保存内容区域的状态 - 请问我该如何实现这一点？ S

$(document).ready(function() {
                $("a.toggle").click(function() {
                    var img = $(this).find("img"); //get a handle of the image tag inside title link
                    var src = $(img).attr("src"); //get the source of the image                 
                    //toggle the source of the image to show either plus/minus
                    if (src.endsWith("search_open.jpg"))
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    else
                        src = src.replace('search_close.jpg', 'search_open.jpg');               
                    $(img).attr("src", src);                
                    //get the title of the anchor tag which corresponds to the id of the content div
                    var content = $(this).attr("title");
                    $(content).toggle();
                });                 
            });             
            String.prototype.endsWith = function(str) {
                return this.lastIndexOf(str) == this.length - str.length;
            }

编辑：最终代码/解决方案

$(document).ready(function() {                                         
                $("a.toggle").each(function () {
                    var img = $(this).find("img");
                    var src = $(img).attr("src");                        
                    var content = $(this).attr("title");
                    var isVisible = $.cookie('content');    
                    if (isVisible == 'true') {
                        $(content).show();
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    }
                    $(img).attr("src", src);    
                });                                                                          
                $("a.toggle").click(function() {
                    var img = $(this).find("img"); //get a handle of the image tag inside title link
                    var src = $(img).attr("src"); //get the source of the image                 
                    //toggle the source of the image to show either plus/minus
                    if (src.endsWith("search_open.jpg"))
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    else
                        src = src.replace('search_close.jpg', 'search_open.jpg');               
                    $(img).attr("src", src);                
                    //get the title of the anchor tag which corresponds to the id of the content div
                    var content = $(this).attr("title");
                    $(content).toggle();
                    $.cookie('content', $(content).is(':visible'));                     
                });                     
            });             
            String.prototype.endsWith = function(str) {
                return this.lastIndexOf(str) == this.length - str.length;
            }   

Answer 1

使用 jQuery.cookie 插件来处理 cookie。使用它存储和获取必要的数据。

https://github.com/carhartl/jquery-cookie

查看项目中的测试示例：

< a href="https://github.com/carhartl/jquery-cookie/blob/master/test.js" rel="nofollow">https://github.com/carhartl/jquery-cookie/blob/master/ test.js

$.cookie('c') // get cookie value
$.cookie('c', 'my value') // set cookie value

你将需要为您切换的每个部分存储一些标记（可能是一些自动增量 ID），然后在 $(document).ready(..) 上您将需要读取并恢复这些部分的状态。

$(document).ready(function () {

    $("a.toggle").each(function () {
        var content = $(this).attr("title");
        var isVisible = $.cookie(content);
        if (isVisible) {
            $(content).show();
        }
    });

    $("a.toggle").click(function () {
        var img = $(this).find("img"); //get a handle of the image tag inside title link
        var src = $(img).attr("src"); //get the source of the image                 
        //toggle the source of the image to show either plus/minus
        if (src.endsWith("search_open.jpg"))
            src = src.replace('search_open.jpg', 'search_close.jpg');
        else
            src = src.replace('search_close.jpg', 'search_open.jpg');
        $(img).attr("src", src);
        //get the title of the anchor tag which corresponds to the id of the content div
        var content = $(this).attr("title");
        $(content).toggle();
        $.cookie(content, $(content).is(':visible'));
    });
});

String.prototype.endsWith = function (str) {
    return this.lastIndexOf(str) == this.length - str.length;
}

Answer 2

是的，您可以使用 jQuery.cookie。

            $("a.toggle").click(function() {
                var img = $(this).find("img"); //get a handle of the image tag inside title link
                var src = $(img).attr("src"); //get the source of the image                 
                //toggle the source of the image to show either plus/minus
                if (src.endsWith("search_open.jpg"))
                    src = src.replace('search_open.jpg', 'search_close.jpg');
                else
                    src = src.replace('search_close.jpg', 'search_open.jpg');               
                $(img).attr("src", src);                
                //get the title of the anchor tag which corresponds to the id of the content div
                var content = $(this).attr("title");
                $(content).toggle();
                //this saves a string with true or false depending on the visibility
                //of your element. i use the title of the element as name for the cookie so that you can save more than one
                $.cookie(content, $(content).is(':visible') );
            });                 
        });