Question

我正试图找出一种方法，以便在按下按钮时切换cookie +类。

如果：按下类名为btn_fixed的按钮： - 将cookie“固定”设置为“true”，
- 将类添加到名为“fixed”的“<header>”，也会在应用类“fixed”时加载页面，因为cookie设置为true 。登记/> 否则：
- 将cookie“固定”设置为“假”（默认值，第一次进入网站时），
- 从“<header>”

中删除“已修复”类

这是我到目前为止所得到的，我现在可以看到它与我想要它做的很远：

if (jQuery.cookie("fixed") != "true") {  
        jQuery('a.fixed_btn').click(function () {  
            jQuery('header').addClass('fixed');  
            jQuery.cookie("fixed", "true");  
        });  
    }  
    else  
    {  
        jQuery('a.fixed_btn').click(function () {  
            jQuery('header').removeClass('fixed');  
    jQuery.cookie("fixed", "false");
    }  



<a href="#" class="fixed_btn">Fixed/Fluid</a>  
<header>aaa</header>

http://jsfiddle.net/UWLdq/7/

感谢您的帮助。

Answer 1

这个怎么样：

$(document).on('click','a.fixed_btn',function(){   
    var fixed = jQuery.cookie("fixed");              
    jQuery('header').toggleClass('fixed');
    jQuery.cookie("fixed", fixed === "true" ? "false" : "true");

})

http://jsfiddle.net/UWLdq/5/

Answer 2

您最初需要切换类，然后绑定执行此操作的单击事件。

jQuery(document).ready(function($) {
    // set class initially based on current cookie value
    $('.cookiefixed').toggleClass('fixed', $.cookie("fixed") == "true");
    // on click, toggle both class and cookie value
    $('a.fixed_btn').click(function() {
        $('.cookiefixed').toggleClass('fixed');
        $.cookie("fixed", $('.cookiefixed').hasClass('fixed'));
    });
});

~~我建议不要使用'header'作为选择器，因为页面上可以有多个标题，我怀疑你是否希望它们都能获得这个类。< /击>~~

~~演示：http://jsfiddle.net/UWLdq/6/~~

Answer 3

使用Bluetoft的答案，你还需要检查页面加载时的cookie。

FIDDLE

$(document).on('click','a.fixed_btn',function(){   
    var fixed = jQuery.cookie("fixed");              
    jQuery('header').toggleClass('fixed');
    jQuery.cookie("fixed", fixed === "true" ? "false" : "true");

});

if ($.cookie("fixed") != "true") {
    $('header').addClass('fixed');
}else{
    $('header').removeClass('fixed');
}

切换饼干＆amp;按下按钮时的类

3 个答案: