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

【问题标题】：Jquery - set class “active” in Li with cookie IIJquery - 在 Li 中使用 cookie II 设置类“活动”
【发布时间】：2014-12-09 20:42:35
【问题描述】：

我真的不知道错在哪里。刷新页面时它仍然无法使用cookie。

功能：如果我点击“LI”，那么“LI”就有“活动”类。如果我重新加载页面“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');
});

感谢您的想法。

【问题讨论】：

标签： jquery css cookies

【解决方案1】：

您需要为每个li 添加不同的id，将选定的id 保存在cookie 中而不是布尔值，并在返回时恢复它（如果存在）。

【讨论】：