无法在jQuery RSS Feed中从localStorage中动态替换类

问题描述

我正在尝试使用jQuery和HTML5 localStorage添加到fav实用程序来填充RSS提要。我想要实现的是当用户点击帖子标题上的 glyphicon-star-empty 时，它会变为 glyphicon-star （已完成）但它应该将选中/收藏的项目存储在 localStorage 中并刷新而不是显示 glyphicon-star -empty ，它应该从localStorage获取有关哪个项目被收藏的数据，而是显示 glyphicon-star 。

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.

我面临的问题是最后一部分。我可以在localStorage中存储fav项目，但我似乎找不到用 glyphicon-star glyphicon-star-empty 的正确方法当页面刷新时，code>即时收到受欢迎的商品。

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.

其他问题是指当用户点击<$时c $ c> glyphicon-bookmark （在标题-RSS附近可用）它应该显示所有收藏的项目，并且还应该取消选择localStorage和当前页面中的项目（即点击 glyphicon-star ）

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)

这里是完整的代码。

这是我正在研究的 jquery 功能：

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

推荐答案

在for循环中添加这样的更改，基本上你需要遍历每个列表元素以及在数组上循环来设置它。

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

                   }

          }); 

这是一个经过修改的JSfiddle

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

这篇关于无法在jQuery RSS Feed中从localStorage中动态替换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！