Question

我正在使用本地存储将值保存到数组中，并根据数组中的值更改锚点的样式，当我单击其中一个锚点并刷新时应用样式，但是当我选择两个锚点和刷新样式消失。

 $(function(){
       var favorite = localStorage.getItem( 'favorite' ); 
       if (favorite  !== null){
          favorite = JSON.parse(favorite) || [];
       } 
       $('.favorites' ).each(function() {
          if($(this).attr('data-petid') == favorite){
            $(this).css('background-image', 'url(../assets/img/heart-red.svg)');
            $(this).css('background-color', '#fefefe');
          }
       });
      // This function changes the color of the heart on the landing page and stores the values into local storage
      $(".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

您正在加载页面时将data-petid与收藏夹的数组进行比较：

if($(this).attr('data-petid') == favorite){

相反，你应该做这样的事情：

var petid = $(this).attr('data-petid');
if ( favorite.indexOf(petid) !== -1 ) {
    // set styles...

当然，在调用indexOf之前，你需要确保收藏夹是一个数组，但是你似乎已经掌握了它。

Answer 2

问题在于

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

样式仅在刷新时应用于一个锚点

2 个答案: