jQueryのlocalStorageからクラスをオンザフライで置き換えることはできませんRSSフィード

Question

jQueryとHTML5 localStorageを使用してfavユーティリティにadd to RSSフィードを入力しようとしています。私が達成しようとしているのは、投稿のタイトルでglyphicon-star-emptyをクリックするとglyphicon-starに変更されますが、選択された/お気に入りのアイテムをlocalStorageに保存し、glyphicon-star-emptyを表示する代わりにリフレッシュする必要があります。どの項目がお気に入りであるかに関するlocalStorageからデータを取得し、代わりにglyphicon-starを表示します。

私が直面している問題は最後の部分です。私はlocalStorageにfavアイテムを格納することができますが、glyphicon-star-emptyをglyphicon-starと置き換える正しい方法が、ページが更新されたときにお気に入りのアイテムのためにオンザフライでは見つからないようです。

他の問題（すなわちglyphicon-starをクリック）ユーザーが（見出し-RSS近く利用可能）glyphicon-bookmarkをクリックしたとき、それはすべてのお気に入りのアイテムを表示する必要がありますし、また、非選択の上のlocalStorageと、現在のページから項目を削除すべきであるということです

ここに完全コードfiddleがあります。

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

Answer 1

がループのため、基本的には、各リスト要素の上だけでなく、オーバーforループのループに必要な内部のこのような変更を追加します。ここ

とは、私が働いているjqueryの機能ですそれを設定する配列。ここで

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

        } 

      }); 

は問題では、ローカルストレージアレイをループされている修正JSfiddle https://jsfiddle.net/ehqefk6j/2/