Javascript 函数调用自身

Question

我有一个带有两个参数的 JavaScript 函数:results 是一个对象数组，i 是索引。

该函数显示该数组中的项目。我还想构建链接来显示数组中的其他条目。

我的代码是:

function renderNews(results, i) {
    $('.articleTitle').text(results[i].Title);
    $('.articleBody').text(results[i].newsBody);

    // Build links
    var linkHtml = '';

    for (var i = 0; i < results.length; i++) {

   linkHtml += '<a href="#" onclick="renderNews(results, ' + i + ')">' + (i + 1) + '</a> ';
    }

    $('.articleActions').html(linkHtml);
}

如您所见，我正在为函数设置 onclick 以调用自身来重绘结果。我收到“函数未定义错误”。

我仍在不断学习。函数调用自身是不是一个坏主意？我想知道是否有人可以建议这样做的正确方法。

Answer 1

如果我理解的话，renderNews 将在页面加载时被调用，对吗？实际上，您的链接将被放置在带有 articleActions 类的组件中。根据您的想法，单击任何链接都会再次调用此函数，并且所有链接都将被新链接替换。这听起来很奇怪。另外，我不知道将 结果 传递给 onclick 事件时您期望什么。实际上，如果您的想法是始终重用相同的结果数组，一遍又一遍地将其无限期地传递给同一个函数，您可以使事情变得更简单:

function renderNews(results) {

    if (results.length == 0)
      return;

    // Build links
    var linkHtml = '';

    for (var i = 0; i < results.length; i++)
       linkHtml += '<a href="#" data-articletitle="' + results[i].Title + '" data-articlebody="' + results[i].newsBody +'" class="article-link">' + (i + 1) + '</a> ';

    $('.articleActions').html(linkHtml);

    $('.articleTitle').text(results[0].Title);
    $('.articleBody').text(results[0].newsBody);

}

$('.article-link').click(function(){
    $('.articleTitle').text($(this).data('articletitle'));
    $('.articleBody').text($(this).data('articlebody'));
});

据我了解，每当您想要更新当前文章时，您都会调用renderNews，它将为数组中保存其数据(标题和正文)的每篇文章构建/重建大量链接)，并将加载第一个项目。因此，一旦页面加载，renderNews就会被调用(我不知道你打算如何做到这一点)。

任何具有 article-link 类的组件都有一个点击事件，在本例中是所有链接( anchor )。单击其中一个后，它会使用其数据更新屏幕(文章的标题和正文)。

您可以改进代码以跟踪所选项目，一旦调用 renderNews，您就加载该文章而不是第一篇文章。或者您可以继续将文章的索引作为参数传递，就像您的示例一样。

由于我不知道如何调用 renderNews 函数，因此很难编写更好的代码，但这可能会让您明白一些事情。

简单JSFiddle demo