Question

我有以下脚本在点击时切换两个div的类，并在触发元素上切换文本。切换状态将保存到cookie中，并在页面刷新时保留。我不知道如何将切换文本状态保存到cookie。任何帮助将不胜感激。

jQuery(document).ready(function ($) {
    $('#secondaryfilter').toggleClass('no-filters', $.cookie('currentToggle') === 'on');
    $('#mymain').toggleClass('wide', $.cookie('currentToggleb') === 'on');
});
jQuery(document).ready(function ($) {
    $('.toggle-filters').on('click', function (e) {
        var txt = $("#secondaryfilter").is(':visible') ? '+ Show Filters' : '- Hide   Filters';
        $(".toggle-filters").text(txt);
        $("#secondaryfilter").toggleClass("no-filters");
        $('#mymain').toggleClass("wide");
        $.cookie('currentToggle', $("#secondaryfilter").hasClass('no-filters') ? 'on' : 'off');
        $.cookie('currentToggleb', $("#mymain").hasClass('wide') ? 'on' : 'off');
        e.preventDefault();
    });
});

Answer 1

jQuery没有内置的cookie支持。如果你从某个地方获取了示例代码，你还需要包含cookie插件：

https://github.com/carhartl/jquery-cookie

将Cookie设置为以下行：

$.cookie('currentToggle', $("#secondaryfilter").hasClass('no-filters')?'on':'off' );

您只是创建一个会话cookie。这意味着当您关闭cookie时，浏览器将抛弃cookie。如果你想在下次回来时保留它，那么你需要添加一个到期日期，如：

var currentToggle = $("#secondaryfilter").hasClass('no-filters')?'on':'off');
$.cookie('currentToggle', currentToggle, { expires: 7 });

除此之外，我看不出你的代码有任何问题，虽然我想知道你是否正确地提出了你的问题，因为这两条线似乎相互矛盾：

切换状态将保存到Cookie中并在页面刷新时保留。
我也不知道如何将切换文本状态保存到cookie中。

Answer 2

我设法让它使用以下代码，如果有人反正以下可以改进，我很乐意看到它。我会给出一个解释，但我只是在学习，我觉得我的术语可能会让其他人感到困惑。

感谢@rtpHarry的回复，我现在知道会话cookie与如何在给定时间内存储cookie的区别，即使浏览器已关闭，我相信将来会派上用场

jQuery(document).ready(function ($) {    
$('#secondaryfilter').toggleClass('no-filters', $.cookie('currentToggle') === 'on');
$('#mymain').toggleClass('wide', $.cookie('currentToggleb') === 'on');
var mytxt = $.cookie('txt');

if (mytxt === '- Hide Filters') {
$(".toggle-filters").text('+ Show Filters');
    } else {
$(".toggle-filters").text('- hide Filters');
    }
});

jQuery(document).ready(function ($) {
$('.toggle-filters').on('click', function(e) {  

var txt = $("#secondaryfilter").is(':visible') ? '+ Show Filters' : '- Hide Filters';
$(".toggle-filters").text(txt);

$("#secondaryfilter").toggleClass("no-filters");
    $('#mymain').toggleClass("wide");
    $.cookie('currentToggle', $("#secondaryfilter").hasClass('no-filters')?'on':'off' );
    $.cookie('currentToggleb', $("#mymain").hasClass('wide')?'on':'off' );
     $.cookie('txt', $("#secondaryfilter").is(':visible') ? '+ Show Filters' : '- Hide Filters');

e.preventDefault();
});
});

将切换文本保存到cookie

2 个答案: