将jquery cookie添加到内容切换

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 

您需要strore你切换每个部分的一些标记（可能是一些自动增加的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')); 
      });     
     });