JQuery使用全局变量链接标题

时间:2017-04-17 19:13:30

标签: javascript jquery html rss global-variables

我正在开发一个显示各种RSS源的页面,带有标签导航以显示不同的RSS源。在大多数情况下,我已经做好了一切。但是,在页面顶部,我有一个标题,表示为RSS提供资源的名称。

我使用全局变量来存储资源的链接,然后在函数中使用该链接创建链接。但是,它目前只是导致所有标头链接到同一资源。

var link = null;
$.fn.rssFeedTopic = function(topicId) {
      switch(topicId) {
          case 'topHeadlines': 
               link = "https://news.google.com/news?cf=all&hl=en&pz=1&ned=us";
               $("#topHeadlines").rssfeed('https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&output=rss', "Google News ", {limit: 6, date:true});
               break;
          case 'topMDHeadlines':
               link = "http://wtop.com/region/local/maryland/";
               $("#topMDHeadlines").rssfeed('http://wtop.com/region/local/maryland/feed/', "WTOP - Maryland Stories ", {limit: 6, date:true});
               break;
          case 'topBusinessHeadlines':
               link = "https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&topic=b";
               $("#topBusinessHeadlines").rssfeed('https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&topic=b&output=rss', "Google News - Business ", {limit: 6, date:true});
               break;
          case 'topSportsHeadlines':
               link = "https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&topic=s";
               $("#topSportsHeadlines").rssfeed('https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&topic=s&output=rss', "Google News - Sports ", {limit: 6, date:true}); 
               break;
       }
};

这是一个包含完整代码的fiddle

我还在学习JQuery所以我怀疑我可能做错了什么。请告诉我。

1 个答案:

答案 0 :(得分:1)

您的方法存在的问题是标题的HTML代码是异步创建的。您正在遍历每个选项卡的数据,将全局变量“link”设置为URL,然后创建每个选项卡的HTML代码,仅在JSON数据之后创建HTML代码已加载 - 到那时,您的循环已经完成迭代,并且循环中的链接的最后一个值,即体育页面,用于每个标签。

您可以通过删除全局变量并将链接URL作为附加选项传递给 rssFeed jQuery插件来解决此问题:

$("#topHeadlines").rssfeed(
    'https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&output=rss', 
    "Google News ",
    {
        limit: 6,
        date:true,
        link: "https://news.google.com/news?cf=all&hl=en&pz=1&ned=us"
    }
);

在你的_callback函数中:

html += '<div class="rssHeader">' + 
        '<a href="' + options.link + '" ' +
        'title="' + news + '">' + news + '</a></div>';

这是您的小提琴的更新版本:https://jsfiddle.net/pahund/LtqLo7Ly/1/