2

样式适用并且本地存储工作正常，但是当我刷新页面时，样式不会再次应用于链接。这些值仍在本地存储中，但它没有在页面上直观地显示。如何进行检查以将这些样式应用于本地存储中的数组中的值。

$(function () {
    var favorite = localStorage.getItem('favorite');
    if (favorite !== null) {
        favorite = JSON.parse(favorite) || [];
        $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
        $(this).css('background-color', '#fefefe');
    }
    $(".favorites").click(function () {     
        var favorite = localStorage.getItem('favorite');
        var petid = $(this).attr('data-petid');
        var index;

        favorite = JSON.parse(favorite) || [];

        if ((index = favorite.indexOf(petid)) === -1) {
            favorite.push(petid);
            $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
            $(this).css('background-color', '#fefefe');
        } else {
            $(this).css('background-image', 'url(../assets/img/heart-full.svg)');
            $(this).css('background-color', '#25aae3');
            favorite.splice(index, 1);
        }
        localStorage.setItem('favorite', JSON.stringify(favorite));
    });
});
4

1 回答 1

1

您始终可以在加载/就绪时应用样式

$(function(){
   var favorite = localStorage.getItem( 'favorite' );
   if (favorite  !== null){
       favorite = JSON.parse(favorite);
       ...
       (apply styles to all pet-ids in the favorites array)
    }
});

编辑 8/22 好吧，我想你会想要编辑你的代码以应用任何一种样式，具体取决于元素是否包含在最喜欢的数组中，即。

您可能需要更换线路

 if (favorite !== null) {
    favorite = JSON.parse(favorite) || [];
    $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
    $(this).css('background-color', '#fefefe');
 }

和

if (favorite !== null) {
  favorite = JSON.parse(favorite) || [];

  $(".favorites").each(function(ix,el){
  var petid = $(this).attr("pet-id");
  if(favorite.indexOf(petId) === -1){
      $(this).css('background-image', 'url(../assets/img/heart-full.svg)');
  $(this).css('background-color', '#25aae3');
  }else{
  $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
  $(this).css('background-color', '#fefefe');
  }
}

如果它在最喜欢的数组中，则此代码应用一种样式，如果数组中缺少它，则应用另一种样式。

此外，为了解决评论中的问题，您可以在一行中应用多种 css 样式。

 $(domelement).css({ "background-color": "#fefefe", "background=image": "url(../assets/img/heart-red.svg" });

此符号允许您将 css 数组移动到文件中的可重用属性中，即...

  var avaliable =  { "background-color": "#fefefe", "background=image": "..." };
  var selected  =  { .... }

然后使用它们

  $(domelement).css(available);
于 2013-08-21T03:19:28.933 回答