Добавление файла cookie jquery к переключателю содержимого

Question

Я использую следующий код для создания области содержимого, которая открывается и закрывается при щелчке, с изображением плюс / минус, которое также переключается в зависимости от состояния области содержимого. Что я хотел бы сделать, это добавить файл cookie jquery, который сохраняет состояние области содержимого - как бы мне этого добиться? 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 для работы с куки. Храните и получайте необходимые данные, используя их.

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

Вам потребуется навести маркер (возможно, некоторый автоинкрементный идентификатор) для каждого переключаемого раздела, а затем на $(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') );
            });                 
        });