0

首先抱歉,我是 jquery 的初学者。

我的问题是我试图用 jquery cookie 制作一个类切换器。

它工作正常只有一个问题。当我在主页上选择工作时,每个工作都有一个唯一的 ID,并且旁边有一个按钮,当用户单击它时,它会将其保存到收藏夹,再次单击将其删除。如果它保存按钮 cganges 为黄色,如果删除更改为蓝色。

我能够在页面刷新后保留课程,但我的问题是我真正无法解决的是,如果我列出了更多工作,点击它会保留课程,然后我添加另一个它会从另一个课程中删除并添加它点击了什么,因此它不会仅将其保留在多个上。

请有人给我一个提示吗?

我的代码:

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 中存储值列表的类似问题,请参见此处如何在 jquery cookie 中存储数组?

实现它,创建一个名为“favList”的列表,

var list = new cookieList("favList");

现在您应该将作业的 ID“添加/删除”到“favList”以使其成为“fav”。

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

当页面加载时,检索列表遍历它们并用你的类标记所有最喜欢的项目,如果你想标记所有不在列表中的项目添加你的逻辑。

$(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 回答