所以，我想制作兩個按鈕，一個用于顯示 json 資料（animals-1.json，animals-2.json animals-3.json，...這取決于 pageCounter 作業正常），第二個用于洗掉的按鈕首先顯示螢屏上的json。每個json只有一個數字，例如animals-1.json顯示數字1，animals-2.json顯示數字2等等......所以當第一個按鈕被點擊SHOW 3次時，它將顯示在螢屏數字1 2 3當我單擊第二個按鈕 HIDE 時，我希望第一個數字消失并僅在螢屏上顯示數字 2 3（animals-2.json 和 animal-3.json）。這個怎么做？謝謝 :) html:
<!DOCTYPE html>
<html>
<body>
<h2>next is</h2>
<button id="btn">SHOW</button>
<button id="btnn" >HIDE</button>
<div id="animal-info"></div>
<div id="nome"></div>
<script src="skripta.js"></script>
</body>
</html>
js：
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
var btnn = document.getElementById("btnn");
btn.addEventListener("click", function(){
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET','http://10.0.9.243/animals-' pageCounter '.json');
ourRequest.onload = function(){
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
};
ourRequest.send();
pageCounter ;
});
function renderHTML(data) {
var htmlString = "";
for (i=0; i < data.length; i ){
htmlString = "<p>" data[i].name "</p>"
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
}
uj5u.com熱心網友回復：
最好的方法是在 htmlString 元素中添加類名。
function renderHTML(data) {
var htmlString = document.createElement("div");
for (i=0; i < data.length; i ){
let pText = document.createTextNode(data[i].name);
let pElement = document.createElement("p");
pElement.append(pText);
htmlString.append(pElement);
htmlString.classList.add('containers') // new Line added
}
animalContainer.append(htmlString);
}
btnn.addEventListener("click", function(){
let containers = document.getElementsByClassName('containers');
if(containers.length > 0){
containers[0].remove();
}
});轉載請註明出處，本文鏈接：https://www.uj5u.com/net/416006.html
標籤：