我有一个带有两个参数的 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 以调用自身来重绘结果。我收到“函数未定义错误”。
我仍在不断学习。函数调用自身是不是一个坏主意?我想知道是否有人可以建议这样做的正确方法。
最佳答案
如果我理解的话,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
函数,因此很难编写更好的代码,但这可能会让您明白一些事情。
关于Javascript 函数调用自身,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35043164/