如何使用纯javascript在数组中设置显示切换

Question

我想为常见问题对CMS进行个性化设置。我需要显示4个第一个问题，并设置一个按钮来切换其他问题的显示。

我正在使用该功能来显示问题：

function toggleViewMoreLess() {    
let articlesRequestPromise = fetch("/api/v2/help_center/fr-fr/articles.json");
let articlesArray = [];
let arrayOfSectionLinks = document.getElementsByClassName('article-list');
articlesRequestPromise.then(response => {
return response.json(); 
}).then(results => {
articlesArray = results.articles;
for (let i = 0; i < arrayOfSectionLinks.length; i++) {
let aId = JSON.parse(arrayOfSectionLinks[i].id);
let threeArticles = articlesArray.filter(article => article.section_id === aId).slice(0, 3);
threeArticles.map(function (article) {
let articleLink = document.createElement("a"); 
articleLink.type = 'link';
articleLink.innerText = article.title;
articleLink.className = 'article-list-link';
articleLink.href = article.html_url + "_" + article.section_id;
return (
arrayOfSectionLinks[i].append(articleLink)
)
});
}
}) 
}
toggleViewMoreLess();

我有一个想法，但我无法实现，那就是在索引3之后的每个部分的数组上设置一个显示none，并在按钮上设置切换的三元条件。我更习惯于使用react而不是香草js，所以我有点迷路了。

理想情况下，我想用useState 做一些类似的事情

Answer 1

如果你的数组是HTML元素的数组，你有没有考虑过只使用CSS？例如，如果您有一组p标签：

p:nth-child( n+4 ).no-display {
display: none;
}

然后有条件地应用类"；没有显示"；到您的标签