Question

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

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

它只能解决一个问题。当我在主页面上选择作业时，每个作业都有一个唯一的ID，旁边有一个按钮，当用户点击它时，它会将其保存到收藏夹点击再次将其删除。如果它保存按钮cganges为黄色，如果删除则变为蓝色。

我能够在页面刷新后保持课程，但我的问题是我真的无法解决的是，如果我列出了更多的工作点击它保持课程，我添加一个nother它从另一个删除该类并添加它点击了什么，所以它不会只保持多个。

可以请某人给我一个提示吗？

我的代码：

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

谢谢

Answer 1

您需要使用Cookie持久存储列表收藏夹作业。为了存储项目列表，我们在javascript中使用数组，但遗憾的是，您只能在cookie中保存字符串。

在cookie中存储类似值列表的类似问题已经被问及并回答了how to store an array in jquery cookie?

实现它，创建一个名为'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');
    });

});

Answer 2

首先感谢所有人的回复，我给了你们所有人一个赞成票，但我今天坐下来并设法用我的逻辑来做。

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

    });

});

再次感谢大家

Jquery更改类与cookie问题

2 个答案: