樣式只適用於刷新的一個錨點

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'); 
    } 
});