javascript - bool 切换并保存到 localStorage 不切换 addClass

Question

尝试做一个 addToWishlist 函数，以便可以保存项目供以后查看，当我将 boolean 值 true/false 保存在localStorage 其切换但不是 .addClass jQuery。我将其保存到 localStorage，因此如果用户刷新页面，它仍然保留他们保存的项目。

如何根据 localStorage true/false 中保存的值正确修复 addClass 切换？

<button onclick="wishList()" class="btn btn-default wishlist"><i class="fa fa-heart" aria-hidden="true"></i> Add to wishlist</button>

var wishlistItems = localStorage.getItem('wishlists');
var addToWishlist = false;
function wishList() {
    addToWishlist = !addToWishlist;
    localStorage.setItem('wishlists', addToWishlist);
    if(wishlistItems === false) {
      $(this).find('.fa').removeClass('add-to-wishlist');
    }
    $(this).find('.fa').addClass('add-to-wishlist');
}

Plnkr sample

Answer 1

您可以使用条件 toggleClass() :

$(this).find('.fa').toggleClass('some-class', !wishlistItems);

希望这对您有所帮助。