带有cookie问题的Jquery更改类答案

【问题标题】：Jquery change class with cookie issue带有cookie问题的Jquery更改类
【发布时间】：2012-07-09 21:24:39
【问题描述】：

首先抱歉，我是 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);

谢谢

【问题讨论】：

看起来您每次都在覆盖 $.cookie('jId') - 我建议将它们作为逗号分隔的列表存储在该 cookie 中。
如果不是很大的要求，你能给我举个例子吗？
我想@ClarkeyBoy 想说的是：与其在cookie 中只存储一个Id，不如存储多个Id。因此，您的操作可能是：i) 如果单击“id1”，请检查它是否在 cookie 中（值是一个列表），如果是 - 什么也不做，否则将“id1”添加到 cookie jId 中的值列表中.在用户选择带有 id1、id5 和 id8 的按钮后，您的 cookie 值将类似于“id1、id5、id8”。当用户再次按下按钮 id8（取消选择）时，新的 cookie 值应该是 id1，id5 [id8 应该被选择性地删除]

标签： jquery codeigniter cookies

【解决方案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);

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

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

});

【讨论】：

【解决方案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');
            }
        }

    });

});

再次感谢大家

【讨论】：