0

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

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

    });

  });
4

2 回答 2

1

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

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

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

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

当然，在调用之前，您需要确保 favourite 是一个数组indexOf，但您似乎掌握了这一点。

于 2013-08-21T04:57:37.883 回答
0

问题在于

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');
    }
});
于 2013-08-21T04:57:50.677 回答