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);
});

jQuery cookie来记住多个div的类

1 个答案: