1

我有两个 json 文件，其中包含该新闻的所有新闻标题和特定主题的内容（不要问我为什么），所以我要做的是加载带有所有标题的 url，然后通过 id 搜索正确的内容。

它看起来像这样：

$.ajax({
    url: 'http://website.com/news.json?=list',
    dataType: 'json',
    success: function (data) {

        $.each(data.news, function (newsId, newsHeadline) {
            $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>');

            $.get('http://website.com/news.json?=list&id=' + newsId, function (data) {

                $('h2').after('<div class="accordion-content">' + data.result.newscontent + '</div>');

            });

        });

    }

});

到目前为止，它的工作几乎与预期一样，它正在加载标题和加载内容之后。

问题是它正在为每个标题加载所有内容。例如，第一个网址有 2 个标题。

所以应该是：

 Headline 1
  Content 1
 Headline 2
  Content 2

但相反，它给了我：

 Headline 1
  Content 1
  Content 2
 Headline 2
  Content 1
  Content 2
4

3 回答 3

2

您没有限定<h2>在处理程序中追加时的引用$.get()。因此，内容被附加到所有 <h2>元素。

于 2012-05-17T22:11:43.257 回答
0

这是因为 ajax 调用的异步方式。
在第一个循环中，您使用回调进行 ajax 调用并继续进行第二个循环调用（无需等待 ajax 完成）。
ajax 回调可以在另一个循环中，所以不是得到 1-1,2-2.3-3 你会得到 1-2,2-2,3-2,4-3 ...
如果你需要它保持同样，您应该考虑以线性方式而不是嵌套的异步回调来执行此操作。

于 2012-05-17T22:14:43.140 回答
0

我认为这可能与两次使用数据变量有关。尝试这个：

$.ajax({
    url: 'http://website.com/news.json?=list',
    dataType: 'json',
    success: function (data) {

        $.each(data.news, function (newsId, newsHeadline) {
            $('h1').after('<h2 id="question-' + newsId + '">' + newsHeadline + '</h2>');

            $.get('http://website.com/news.json?=list&id=' + newsId, function (data2) {

                $('h2').after('<div class="accordion-content">' + data2.result.newscontent + '</div>');

            });

        });

    }

});

编辑：

哎呀...看起来Pointy是正确的。$.get()函数中的$('h2')选择器正在获取页面上的所有 h2 HTML 元素。

于 2012-05-17T23:45:24.507 回答