JQuery 使用全局变量 link Header

Question

我正在制作一个页面，该页面将显示各种 RSS 提要，并使用选项卡式导航显示不同的 RSS 提要。在大多数情况下，我一切正常。但是，在页面的顶部，我有一个 header 表示提供 RSS 的资源的名称。

我正在使用全局变量将 link 存储到资源中，然后在函数中使用该资源来创建 link。但是，它目前只是导致所有 header 都 link 到同一资源。

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 所以我怀疑我可能做错了什么。请告诉我。

Answer 1

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

您可以通过删除全局变量并将您的 link URL 作为附加选项传递给您的 rssFeed [=31= 来解决此问题] 像这样的插件：

$("#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>';

这是您的 fiddle 的更新版本：https://jsfiddle.net/pahund/LtqLo7Ly/1/

JQuery 使用全局变量 link Header

JQuery Using Global Variable to link a Header

html

javascript

rss

jquery

global-variables