3

訪問者が自分の好きなコンテナだけを表示できるようにするために、選択したコンテナにマークを付ける機能を提供したいと考えています。私が達成できないのは、お気に入りを Cookie に保存することです。これにより、私の Web サイトにアクセスするたびに最初からマークする必要がなくなります (合計で 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>

Jクエリ

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

1 に答える 1

3

まず、オプション要素ごとに一意の識別子があると仮定します。各要素に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);
});
于 2013-09-29T00:16:46.210 に答える