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

Question

我真的不知道错误在哪里。当我刷新页面时，它仍然不适用于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');
});

谢谢你的想法。

Answer 1

您需要

为每个li添加不同的id，将所选的ID保存在cookie而不是布尔值上，并在浏览时恢复它（如果存在）。