jQuery 切换 Cookie 支持

Posted 2023-02-25

【中文标题】jQuery 切换 Cookie 支持

【英文标题】：jQuery Toggle Cookie Support

【发布时间】：2009-12-30 20:18:46

【问题描述】：

我正在尝试在我的幻灯片切换脚本中实现 jQuery Cookie 插件，但到目前为止还没有成功。这是我的代码（没有任何 cookie 实现）：

jQuery:

$(document).ready(function() 
  $('a.toggle').click(function()  
   var id = $(this).attr('name');
   $('#module' + id).slideToggle('fast');
   $('a.toggle[name='+id+']').toggle();
   return false; 
  );
);

html：

<a class="toggle" name="1" href="#">- Hide</a> 
<a class="toggle hidden" name="1" href="#">+ Show</a>

<div id="module1"><p>Hello World</p></div>

有人知道在我现有的代码中实现 jQuery Cookie 插件是否足够容易，以便记住打开/关闭状态？

谢谢。

【参考方案1】：

jQuery cookie 插件非常易于使用。基本上，您需要做的就是在使用切换时通过 cookie 设置标志。

要在站点范围内设置值，可以使用如下简单语句：

$.cookie("currentToggle", "on", path: "/");

然后要在需要时获取值，请使用：

var currentState = $.cookie("currentToggle");

我不确定您打算如何使用它来切换，但假​​设您需要跨多个页面跟踪状态。您可以在切换触发时轻松设置 cookie，跟踪它所处的状态（开/关等）。在其他页面加载期间，通用脚本可以检查 cookie 并根据标志设置切换。这将使网站看起来像是跨页面“记住”以前的状态。

无论如何只是一个示例使用。希望这会有所帮助。

jQuery Cookie 插件：http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

编辑以提供实施示例：

这是一个有效的示例实现。需要引用 jQuery 和 jQuery cookie 插件，以及一个 css 定义。在每个页面上定义所有脚本和 CSS 时跨多个页面工作。

javascript：

$(document).ready(function() 

    var button = $('#hideButton');

    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') 
        togglePanel(button, false);
    
    else 
        togglePanel(button, true);
    

    //handle the clicking of the show/hide toggle button
    button.click(function() 
        //toggle the panel as required, base on current state
        if (button.text() === "+Show") 
            togglePanel($(this), true);
        
        else 
            togglePanel($(this), false);
        
    );

);

function togglePanel(button, show) 

    var panel = $('#panel');

    if (show) 
        panel.removeClass('hidden');
        button.text('-Hide');
        $.cookie('currentToggle', '',  path: '/' );
    
    else 
        panel.addClass('hidden');
        button.text('+Show');
        $.cookie('currentToggle', 'hidden',  path: '/' );
    

CSS：

.hidden

    display: none;

标记：

<a id="hideButton" href="javascript:;">-Hide</a>
<div id="panel">
    <p>Hello World</p>
</div>

可能有许多更有效的方法来实现它，但为了快速验证概念，上述方法效果很好。

【讨论】：

如何在我现有的代码中实现这一点？似乎无法弄清楚。