Html 具有toggleClass的Cookie存储

我的网站上有cookies，所以每当用户点击“bookmark”时，就会添加“bookmarked”类，这会使它变成不同的颜色

有人能告诉我哪里出了问题吗？我希望每当用户刷新页面时，它都会将该类添加到他们以前单击过的.bookmark类中

此外，我希望如果他们单击“书签”类，那么会删除该类的cookie。因为他们再也不想预订了，所以请标记此项

HTML

明星
明星
明星

CSS

.bookmarked{background:red；}

JQuery

 <script>
 $(".bookmark").each(function () {
     if (Cookies.get($(this))) {$(this).addClass('bookmarked');}
 });

$('.bookmark').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('bookmarked');
    Cookies.set('bookmark-' + $('.bookmark').index(this), 'bookmarked', { expires: 365 });
});
</script>

$（“.bookmark”）。每个（函数（）{
if（Cookies.get（$（this））{$（this.addClass（'bookmarked'）；}
});
$（'.bookmark'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.toggleClass（'bookmarked'）；
Cookies.set（'bookmark-'+$（'.bookmark'）.index（this），'bookmarked'，{expires:365}）；
});

首先，请注意，在cookie的

get（）

方法中使用

$（this）

是不正确的。您需要使用

.bookmark

元素的索引，该元素可以通过提供给

each（）

的第一个参数进行检索

话虽如此，但您正在使用的cookie库似乎不再工作。在所有其他情况下，您都遵循，并且没有创建cookie。即使是基本的

Cookies.add（'foo'，'bar'）

也不起任何作用

作为一种解决方法，我建议您使用localStorage创建所需的功能：

$（“.bookmark”）。每个（函数（i）{
if（localStorage.getItem（'bookmark-'+i））{
$（this.addClass（'bookmarked'）；
}
});
$（'.bookmark'）。在（'click'，函数（e）{
让$this=$（this.toggleClass（'bookmarked'）；
if（$this.hasClass（'bookmarked'））{
localStorage.setItem（'bookmark-'+$this.index（'.bookmark'），'bookmarked'）；
}否则{
localStorage.removietem（'bookmark-'+$this.index（'.bookmark'）；
}
});

---

你好，罗瑞，谢谢你的帮助！现在我将通过localstorage使用。只要一个简单的问题，如果书签已经得到类“书签”。如果我再次单击此按钮以删除切换，则在刷新时，仍会显示该类。你有什么建议吗？你说得对-我刚刚通过调用

removietem

Brilliant更新了解决该问题的答案，非常感谢Rory的帮助！非常感谢

<style>.bookmarked {background:red;}</style>

 <script>
 $(".bookmark").each(function () {
     if (Cookies.get($(this))) {$(this).addClass('bookmarked');}
 });

$('.bookmark').on('click', function (e) {
    e.preventDefault();
    $(this).toggleClass('bookmarked');
    Cookies.set('bookmark-' + $('.bookmark').index(this), 'bookmarked', { expires: 365 });
});
</script>

$(".bookmark").each(function(i) {
  if (Cookies.get('bookmark-' + i)) {
    $(this).addClass('bookmarked');
  }
});

$('.bookmark').on('click', function(e) {
  $(this).toggleClass('bookmarked');
  Cookies.set('bookmark-' + $(this).index('.bookmark'), 'bookmarked', {
    expires: 365
  });
});