0

最初に申し訳ありませんが、jqueryの初心者です。

私の問題は、jquerycookieを使用してクラススイッチャーを作成しようとしていることです。

1つの問題だけで問題なく動作します。メインページでジョブを選択すると、すべてのジョブに一意のIDがあり、その横にボタンがあります。ユーザーがそれをクリックすると、お気に入りに保存され、もう一度クリックすると削除されます。保存した場合はボタンが黄色に変わり、削除した場合は青色に変わります。

ページを更新した後もクラスを維持できましたが、私の問題は本当に解決できないことです。リストされているジョブがさらにある場合は、それをクリックするとクラスが維持され、他のクラスからクラスが削除されて追加されます。何がクリックされたので、複数の1つだけに保持されません。

誰かが私にヒントをくれませんか？

私のコード：

html

<a href="#" id="<?php echo $res->info_id; ?>" class="favorite btn btn-primary btn-mini" title="Add to favorite">
  <i class="icon-star icon-white"></i>
</a>

jQuery

(function () {

//save to favorites
$('.favorite').on('click', function(e){
    e.preventDefault();
    var data = [],
    newclass = 'btn-warning',
    oldcalss = 'btn-primary',
    fav = $(this);
    favId = fav.attr('id'),

    $.ajax({
      type: "POST",
      url: base_url + 'ajax/add_favorite/' + favId,
      data: favId,
      dataType: "json",
      success: function(data) { 
        if(data.status == "removed"){
          $.cookie('keepClass', 'btn-primary');
          $.cookie('jId', favId);
          fav.removeClass(newclass)
          .addClass($.cookie('keepClass'))
          .attr("title", "Add to favorites");
        } else {
          $.cookie('keepClass', 'btn-warning');
          $.cookie('jId', favId);
          fav.removeClass(oldcalss)
          .addClass($.cookie('keepClass'))
          .attr("title", "Remove from favorites");;
        }
      }
    });
});

$('#' + $.cookie('jId')).attr('class', "btn btn-mini " + $.cookie('keepClass'));

})(jQuery);

ありがとうございました

4

2 に答える 2

1

Cookieを使用して、お気に入りのジョブのリストを永続的に保存する必要があります。アイテムのリストを保存するために、JavaScriptで配列を使用しますが、残念ながら、Cookieに保存できるのは文字列のみです。

値のリストをCookieに保存するという同様の問題は、すでに質問され、回答されています。jquerycookieに配列を保存する方法についてはこちらをご覧ください。

それを実装し、「favList」というリストを作成します。

var list = new cookieList("favList");

ここで、ジョブのIDを「favList」に「追加/削除」して「fav」にする必要があります。

list.add(favId);
list.remove(favId);

ページが読み込まれると、リストを取得してそれらを繰り返し処理し、クラスですべてのfavアイテムをマークします。リストにないすべてのアイテムをマークする場合は、ロジックを追加します。

$(document).ready(function(){
  var list = new cookieList("favList"); //no need to create this again for click logic
  $.each(list.items() , function(index, value){
    $('#' + value).addClass('iAmAFavItem');
    });

});
于 2012-07-06T07:19:41.407 に答える
0

最初に返信してくれてありがとう、私はあなたたち全員に賛成票を送りました、しかし私は今日座って、私の論理でそれをなんとかすることができました。

var cookieName = 'fav_';
$('.favorite').each(function(){
    var id = $(this).attr('id'), cookie = cookieName + id;
    if($.cookie(cookie) !== 'save' ){
        $(this).addClass('btn-primary');
    } else if($.cookie(cookie) !== 'remove') {
        $(this).addClass('btn-warning');
    }

}).on('click', function(e){
    e.preventDefault();
    var fav = $(this);
    var id = fav.attr('id');

    $.ajax({
        type: "POST",
        url: base_url + 'ajax/add_favorite/' + id,
        data: id,
        dataType: "json",
        success: function(data)
        {   
            if(data.status == "removed")
            {
                $.cookie(cookieName + $(fav).attr('id'), 'remove');
                $(fav).removeClass('btn-warning').addClass('btn-primary');
            } else {
                $.cookie(cookieName + $(fav).attr('id'), 'save');
                $(fav).removeClass('btn-primary').addClass('btn-warning');
            }
        }

    });

});

どうもありがとうございました

于 2012-07-09T13:24:39.070 に答える