Question

First sorry im a bit of a beginner in jquery.

My problem is that im trying to make a class switcher with jquery cookie.

It works fine only one problem.
When i select the jobs on the main page every job has an unique id, and has a button next to it, when the user clicks on it it saves it to the favorites clicks again removes it.
If its saved the button cganges to yellow, if removed changes to blue.

I was able to keep the class after page refresh, but my problem is what i really cant solve is, if i have more jobs listed click on it keeps the class, and i add a nother it removes the class from the other and adds it whats clicked, so it not keeping it on multiple only one.

Could please someone give me a hint?

My code:

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

thank you

Answer 1

First thank you all for the replyes, i gave all of you an upvote, but i sat down today and managed to do it with my logic.

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

    });

});

thank you for all again