jQuery cookie 来记住多个 div 的类

Question

我想让访问者能够标记他选择的容器，以便他能够仅显示他/她最喜欢的容器。我无法实现的是将他们的收藏夹存储在 cookie 中，这样他们就不必在每次访问我的网站时从头开始标记它们(总共有 36 个容器)。我已经阅读了 jquery cookie 插件文档，还搜索了堆栈溢出并遵循了几个教程，但仍然不知道如何使用它。谢谢。

HTML

<div class="panel-player-favorite-option">
    <div class="not-favorite"></div>
</div>
<div class="panel-player-favorite-option">
    <div class="not-favorite"></div>
</div>
<div class="panel-player-favorite-option">
    <div class="not-favorite"></div>
  </div>
<div class="panel-player-favorite-option">
    <div class="not-favorite"></div>
</div>

JQUERY

jQuery('.panel-player-favorite-option').click(function() {
    jQuery(this).children().toggleClass("favorite not-favorite");
});

Answer 1

首先，我假设每个选项元素都有唯一的标识符。我已经为每个元素添加了 id。我还建议您使用选项本身来拥有 favorite 类，从而消除在所有选定选项的子选项上切换该类的歧义。

这是我生成的 HTML:

<div id="option-1" class="panel-player-favorite-option"></div>
<div id="option-2" class="panel-player-favorite-option"></div>
<div id="option-3" class="panel-player-favorite-option"></div>
<div id="option-4" class="panel-player-favorite-option"></div>

然后这段代码对我有用，使用 jquery.cookie.js :

// set cookie name
var COOKIE_NAME = 'the_cookie';

// set cookie to automatically use JSON format
jQuery.cookie.json = true;

// retrieve or initialize favorites array
var favorites = jQuery.cookie(COOKIE_NAME) || [];

// collect all option elements in the dom
var options = jQuery('.panel-player-favorite-option');

// restore favorites in dom
for(var id in favorites)
{
    options.filter('#'+favorites[id]).addClass("favorite");
}

options.click(function() {
    // dom element
    var element = jQuery(this);

    // element id
    var id = element.attr('id');

    // toggle favorite class on the element itself
    element.toggleClass("favorite");

    // add or remove element id from array of favorites
    if(element.hasClass("favorite"))
        favorites.push(id);
    else
        favorites.splice(favorites.indexOf(id),1);

    // store updated favorites in the cookie
    jQuery.cookie(COOKIE_NAME, favorites);
});