Jquery - 使用cookie II在Li中设置“活动”类

时间:2014-12-08 18:41:31

标签: jquery css cookies

我真的不知道哪里出错了。当我刷新页面时,仍然无法使用cookie。

功能:如果我点击“LI”,那么“LI”的类别为“active”。如果我重新加载页面“LI”仍然是“活跃”类。

http://jsfiddle.net/skyndas/arfqxc6e/

function setPatCookie() {
        PatCookieVal = $('.patchange li').hasClass('active') ? 'isActive' : 'notActive';
        $.cookie('PatCookieName', PatCookieVal, {
            expires: 365,
            path: '/'
        });    
    }

    $(".patchange li").click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        setPatCookie();
    });

$(document).ready(function () {
    if ($.cookie('PatCookieName') == 'isActive') {
            $('.patchange li').addClass('active');    
        } else {
            $('.patchange li').removeClass('active');
        }  
});

请帮帮我。感谢

解决方案:

<UL CLASS="patchange">
  <LI ID="pat_1" CLASS='patchange_1' TITLE="">1</LI>
  <LI ID="pat_2" CLASS='patchange_2' TITLE="">2</LI>
  <LI ID="pat_3" CLASS='patchange_3' TITLE="">3</LI>
  <LI ID="pat_4" CLASS='patchange_4' TITLE="">4</LI>
  <LI ID="pat_5" CLASS='patchange_5' TITLE="">5</LI>
  <LI ID="pat_6" CLASS='patchange_6' TITLE="">6</LI>
  <LI ID="pat_7" CLASS='patchange_7' TITLE="">7</LI>
  <LI ID="pat_8" CLASS='patchange_8' TITLE="">8</LI>
  <LI ID="pat_9" CLASS='patchange_9' TITLE="">9</LI>
  <LI ID="pat_10" CLASS='patchange_10' TITLE="">10</LI>
</UL>

Jquery

$(".patchange li").click(function () {
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
    $.cookie('PatCookieName', $(this).attr('id'), {
        expires: 365,
        path: '/'
    });
});

$(document).ready(function () {
    /* Cookie - isActive/notActive */
    $('#' + $.cookie("PatCookieName")).addClass('active');
});

感谢您的想法。

1 个答案:

答案 0 :(得分:1)

您需要为每个id添加不同的li,在Cookie上保存所选项的ID而不是布尔值,并在浏览时将其恢复。