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