Question

尝试执行127.0.0.1 localhost 127.0.1.1 jordanism # The following lines are desirable for IPv6 capable hosts ::1 ip6-localhost ip6-loopback fe00::0 ip6-localnet ff00::0 ip6-mcastprefix ff02::1 ip6-allnodes ff02::2 ip6-allrouters功能，以便保存addToWishlist值boolean true/false切换localStorage而不是{ {1}} jQuery。我将其保存到.addClass，因此如果用户刷新页面，它仍会保存已保存的项目。

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

localStorage true/false

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

Plnkr sample

Answer 1

您可以使用条件toggleClass()：

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

希望这有帮助。

Answer 2

更短的方法是使用toggleClass，它可以将布尔值作为第二个参数：

$(this).find('.fa').toggleClass('add-to-wishlist', !wishlistItems);

Answer 3

很多答案都在谈论使用toggleClass()，这很好 - 但这不是你真正的问题。

您正在使用$(this)尝试查找元素，但this未引用您认为引用的内容。在这个例子中，它是wishList()函数的范围 - 而不是被单击的元素。

将event添加到您的onclick事件中;

<button onclick="wishList(event)" ...>...</button>

然后，对于wishList()函数，请使用event.target来引用所单击的元素;

function wishList(event) {
    var element = event.target;
    localStorage.setItem('wishlists', !addToWishlist);
    $(element).find('.fa').toggleClass('add-to-wishlist', !addToWishlist);
}

要在加载页面时添加类，只需从本地存储中获取数据，然后根据需要添加类。

但是，由于您需要直接引用元素而不是基于上述事件 - 最好总是直接引用该元素。

例如，只需在$(document).ready()函数中包含此内容;

var lsWishList = localStorage.getItem('wishlists');
if(lsWishList == true) {
    $(".wishlist").find('.fa').addClass('add-to-wishlist');
}

关于什么是真的

的说明

使用此比较时要小心。字符串值将返回为TRUE（使用==） - 并且由于本地存储只能可靠地用于存储字符串，因此您可能需要重新考虑如何存储该数据。

Answer 4

尝试使用jquery＆＃39; s toggleClass

  $(this).find('.fa').toggleClass('add-to-wishlist');

方法将更改为

function wishList() 
{
    localStorage.setItem('wishlists', !(addToWishlist=="true"));
    $(this).find('.fa').toggleClass('add-to-wishlist');
}

或将状态添加到toggleClass

var addToWishlist = localStorage.getItem('wishlists');
function wishList() 
{
    addToWishlist = !( addToWishlist == "true" || addToWishlist == true );
    localStorage.setItem('wishlists', addToWishlist );
    $(this).find('.fa').toggleClass('add-to-wishlist', addToWishlist );
}

Answer 5

wishlistItems总是返回false，因为它声明并在函数外部分配在将数据分配到wishlistItems = localStorage.getItem('wishlists')

之后，在函数内添加localStorage

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

根据评论更新了答案

根据 This link ，我们无法将布尔值保存到Localstorage

function wishList(onload) {
  var addToWish = (localStorage.getItem('wishlists')  == "true");
  var wishlistItems = (onload)?addToWish:!addToWish;
    localStorage.setItem('wishlists', wishlistItems);
     $(".wishlist").find('.fa').addClass('add-to-wishlist');
     if(wishlistItems === false){
       $(".wishlist").find('.fa').removeClass('add-to-wishlist');
     }
}
$(function(){
  wishList(true);
})

也可以调用相同的函数onload。 wishList(true) 传递一个变量以保留愿望清单值onlaod。

<强> updated working example demo

布尔切换并保存到localStorage不切换addClass

5 个答案: