jQuery在点击时添加越来越多的项目

Question

我有一个按钮，我想添加一个我的GitHub存储库列表。我让它工作，唯一的问题是每次单击，它都会将相同的存储库列表附加到列表中。这是函数的代码

<button onclick="loadRepos()" class="btn btn-warning justify-content-center">Load Repos from Github</button>

function loadRepos(){
let gitHubRequest = new XMLHttpRequest();
gitHubRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let gitObject = JSON.parse(this.responseText);
for (let i = 0; i < gitObject.length; i++){
let ul = document.getElementById("repositories");
let li = document.createElement("LI");
li.className = "list-group-item";
let a = document.createElement("a");
li.appendChild(document.createTextNode(gitObject[i].name));
a.appendChild(li);
a.setAttribute("href",gitObject[i].html_url);
ul.appendChild(a);
}

如何使按钮在单击一次后停止添加。最终目标是当您单击列表时它会显示列表，然后在再次单击时隐藏列表。我尝试使用 .toggle，但无法使其工作。有什么建议吗？提前感谢大家:)

Answer 1

每次点击加载只是为了隐藏和显示数据是浪费，而不是只加载一次数据并使用点击事件来隐藏和显示这些数据;

function loadRepos(){
let gitHubRequest = new XMLHttpRequest();
gitHubRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let gitObject = JSON.parse(this.responseText);
let ul = document.getElementById("repositories");
for (let i = 0; i < gitObject.length; i++){
let li = document.createElement("LI");
li.className = "list-group-item";
let a = document.createElement("a");
li.appendChild(document.createTextNode(gitObject[i].name));
a.appendChild(li);
a.setAttribute("href",gitObject[i].html_url);
ul.appendChild(a);
}
}
}
}
loadRepos();
function toggleRepositories() {
document.getElementById("repositories").classList.toggle('hidden');
}

.HTML：

<button onclick="toggleRepositories()" class="btn btn-warning justify-content-center">Load Repos from Github</button>

.CSS：

.hidden {
visibility: hidden;
}