Question

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

$(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

项目中的结帐测试示例：

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') );
            });                 
        });

将jquery cookie添加到内容切换

2 个答案: