Cannot replace class on the fly from localStorage in jQuery RSS Feed

问题

I'm trying to fill RSS feed with add to fav utility using jQuery and HTML5 localStorage. What I'm trying to achieve is when a user clicks on glyphicon-star-empty available on title of post, it changes to glyphicon-star (which is done) but it should store the selected/favorited item in localStorage and on refresh instead of showing glyphicon-star-empty, it should fetch data from localStorage regarding which item is favorited and show glyphicon-star instead.

The problem i'm facing is in the last part. I can store fav items in localStorage but I don't seem to find the correct way to replace glyphicon-star-empty with glyphicon-star on the fly for favorited items when the page is refreshed.

the other problem is that when user clicks on glyphicon-bookmark (available near the heading -RSS) it should show all the favorited items and should also remove items from localStorage and current page on deselection (i.e clicking glyphicon-star)

here is the complete code fiddle.

and here is the jquery function i'm working on:

function blogRSS(url, container) {
var content = $('.data-content'); //console.log(content);


$.ajax({
  url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
  dataType: 'json',
success: function(data) {
  console.log(data.responseData.feed);


  $.each(data.responseData.feed.entries, function(key, value) {
    var thehtml = '<h4><a href="' + value.link + '" target="_blank">' + value.title + '</a></h4>';

    $("body").append(itemLayout);

          $('.panel-heading').last().html(thehtml);
          $('.data-content').last().html(value.content);

          $('.data-title').last().next().slideToggle(0);
      //console.log($('.panel-heading').last().html(value.title));
       //console.log($('.panel-heading').closest('.data-title').text());
       if(localStorage.favorite != null){
           arr = JSON.parse(localStorage.favorite);
           for(var i = 0; i < arr.length; i++){
              // console.log($('.panel-heading').last().text() == arr[i].title);
               if($('.panel-heading').text() == arr[i].title){
                   console.log('match');
                   $('.bkmark_icon').removeClass('glyphicon-star-empty');
                   $('.bkmark_icon').addClass('glyphicon-star');
                   //console.log('match');
               }
           }


       }

  }); $('.data-title').find('h4').addClass('panel-title');

回答1:

Add a change like this inside the for loop,Basically you need to loop over each list element as well as for loop over the array to set it.

   $( ".panel-heading" ).each( function( index, element ){                   
                   if($(this).text() == arr[i].title.trim()){                                            
                       $(this).next().removeClass('glyphicon-star-empty');
                       $(this).next().addClass('glyphicon-star');

                   }

          }); 

Here is a modified JSfiddle https://jsfiddle.net/ehqefk6j/2/

来源：https://stackoverflow.com/questions/37331061/cannot-replace-class-on-the-fly-from-localstorage-in-jquery-rss-feed