Question

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

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

Answer 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);

在页面刷新时，保留我在本地存储中的值上设置的样式

1 个答案: