下面的代码包含一个 HTML 选项卡，其中填充了一些动态创建的 DOM 元素。我目前在我的选项卡中有一个动画加载器，它在 tab 中的内容完全加载后消失。
我有一个按钮可以重新填充我的选项卡，我想要完成的是当我单击该按钮时，选项卡中的内容将被清除并且加载程序将重新出现，一旦选项卡加载程序将消失的新数据重新填充。
有没有一种简单的方法可以完成此操作，我目前在下面尝试的方法似乎不起作用。我在代码中添加了一些评论 非常感谢任何帮助。
var personArr = [];
var person = {
["first-Name"]: "John",
["last-Name"]: "Doe",
["age"]: 21,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
["first-Name"]: "Paul",
["last-Name"]: "Logan",
["age"]: 22,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
["first-Name"]: "Sean",
["last-Name"]: "Kim",
["age"]: 32,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
["first-Name"]: "Ken",
["last-Name"]: "Chow",
["age"]: 12,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);
var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();
personArr.forEach((person, i) => {
var name = document.createElement('h4');
var desc = document.createElement('p');
var button = document.createElement('div');
name.textContent = `${person['first-Name']} ${person['last-Name']}`;
desc.textContent = ` ${person['person-desc']}`;
frag.appendChild(name);
frag.appendChild(desc);
});
parent.appendChild(frag);
loader.style.display = 'none'; // This makes the loader disappear once content is loaded.
function updateTab() {
var anotherArr = [];
var person5 = {
["first-Name"]: "Jun",
["last-Name"]: "Kim",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person6 = {
["first-Name"]: "Scooby",
["last-Name"]: "Doo",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person7 = {
["first-Name"]: "Seiya",
["last-Name"]: "Shun",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person8 = {
["first-Name"]: "Ikki",
["last-Name"]: "Hyuga",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
anotherArr.push(person5, person6, person7, person8);
var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();
anotherArr.forEach((person, i) => {
var name = document.createElement('h4');
var desc = document.createElement('p');
var button = document.createElement('div');
name.className = "lol";
name.textContent = `${person['first-Name']} ${person['last-Name']}`;
desc.textContent = ` ${person['person-desc']}`;
frag.appendChild(name);
frag.appendChild(desc);
});
loader.style.display = 'block'; // Trying to make loader reappear
parent.innerHTML = "";
parent.appendChild(frag);
loader.style.display = 'none'; // Disappear again after content is loaded
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.line1 {
display: inline-block;
}
.size {
width: 50%;
}
a.morelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.lol {
color: lime;
font-weight: bold;
}
.loader {
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #05788C;
border-bottom: 10px solid #05788C;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="size">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>
<div id="People" class="tabcontent">
<!-------------------This is my Loader--------------------->
<div id="loader" class="loader"></div>
<!-------------------This is my Loader--------------------->
<div class="line1">
</div>
</div>
</div>
<button type="button" onclick="updateTab()">Update Data!</button>
</body>
</html>最佳答案
缺少的是
loader.style.display = 'none';
同样使用超时功能。使用下面的脚本。
<script>
$( document ).ready(function() {
console.log( "doc ready!" );
var personArr = [];
var person = {
["first-Name"]: "John",
["last-Name"]: "Doe",
["age"]: 21,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
["first-Name"]: "Paul",
["last-Name"]: "Logan",
["age"]: 22,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
["first-Name"]: "Sean",
["last-Name"]: "Kim",
["age"]: 32,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
["first-Name"]: "Ken",
["last-Name"]: "Chow",
["age"]: 12,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);
var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();
personArr.forEach((person, i) => {
var name = document.createElement('h4');
var desc = document.createElement('p');
var button = document.createElement('div');
name.textContent = `${person['first-Name']} ${person['last-Name']}`;
desc.textContent = ` ${person['person-desc']}`;
frag.appendChild(name);
frag.appendChild(desc);
});
parent.appendChild(frag);
loader.style.display = 'none'; // This makes the loader disappear once content is loaded.
});
function updateTab() {
var anotherArr = [];
var person5 = {
["first-Name"]: "Jun",
["last-Name"]: "Kim",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person6 = {
["first-Name"]: "Scooby",
["last-Name"]: "Doo",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person7 = {
["first-Name"]: "Seiya",
["last-Name"]: "Shun",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person8 = {
["first-Name"]: "Ikki",
["last-Name"]: "Hyuga",
["age"]: 18,
["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
anotherArr.push(person5, person6, person7, person8);
var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();
anotherArr.forEach((person, i) => {
var name = document.createElement('h4');
var desc = document.createElement('p');
var button = document.createElement('div');
name.className = "lol";
name.textContent = `${person['first-Name']} ${person['last-Name']}`;
desc.textContent = ` ${person['person-desc']}`;
frag.appendChild(name);
frag.appendChild(desc);
});
loader.style.display = 'block'; // Trying to make loader reappear
parent.innerHTML = "";
parent.appendChild(frag);
// Disappear again after content is loaded
setTimeout(function() { loader.style.display = 'none'; }, 2000);
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
关于javascript - 单击 html 加载器重新出现并消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51393237/