我是一個(gè)超級(jí)興奮的新手，一直堅(jiān)持這個(gè)；到處都找不到這個(gè)，請(qǐng)幫忙：如何使 vardotContainer成為 JSON DB 中的所有 id，以便使用 CSS“dot-hide”屬性使所有匹配的 HTML id 元素不可見(jiàn)（與使用 getElementById 指定的這一個(gè)“n788”id 相對(duì)應(yīng)）。因此，使用新 id 值（如 n790 或 n786）動(dòng)態(tài)更新的 JSON 數(shù)據(jù)庫(kù)將使用 CSS“dot-hide”異步隱藏匹配的 HTML id 元素點(diǎn)。JavaScriptvar dotContainer = document.getElementById("n788"); //THIS TO CONTAIN ALL ID VALUES FROM THE JSON DB var dataRequest = new XMLHttpRequest(); dataRequest.open('get', 'https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json'); dataRequest.onload = function() { var ourData = JSON.parse(dataRequest.responseText); //setInterval(function(){ renderdata(ourData); //}, 1000); };dataRequest.send(); { }function renderdata(dataobjectarray) { var texString = "" for (i = 0; i < dataobjectarray.length; i++) { texString += dataobjectarray[i].id + ","; } dotContainer.insertAdjacentText('afterEnd', texString); //REFERENCE OF JSON ID VALUES TO HIDE HTML ID ELEMENTS dotContainer.classList.add("dot-hide");}JSON[{"id":"n787"},{"id":"n788"},{"id":"n789"}]超文本標(biāo)記語(yǔ)言<div class="grid"> <a id = "n786" class = "dot" href="#786"></a> <a id = "n787" class = "dot" href="#787"></a> <a id = "n788" class = "dot" href="#788"></a> <a id = "n789" class = "dot" href="#789"></a> <a id = "n790" class = "dot" href="#790"></a>我在這里做了一支筆：https ://codepen.io/andijonson/pen/gOpEmEQ
1 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
您必須添加和刪除 css。
樣本：
var dotContainer = document.getElementById("n788"); //THIS TO CONTAIN ALL ID VALUES FROM THE JSON DB
var dataRequest = new XMLHttpRequest();
dataRequest.open(
"get",
"https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
);
dataRequest.onload = function() {
var ourData = JSON.parse(dataRequest.responseText);
//setInterval(function(){
renderdata(ourData);
//}, 1000);
};
dataRequest.send();
function renderdata(dataobjectarray) {
document.querySelectorAll("div a").forEach(x => {
x.className = "dot";
});
var texString = "";
for (i = 0; i < dataobjectarray.length; i++) {
texString += dataobjectarray[i].id + ",";
}
dotContainer.insertAdjacentText("afterEnd", texString);
}
演示：
window.onload = () => {
function fetchData() {
fetch(
"https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"
)
.then(res => res.json())
.then(renderdata);
}
function renderdata(data) {
document.querySelectorAll("div a").forEach(x => {
x.classList.remove("hide");
});
data.forEach(item => {
const elm = document.getElementById(item.id);
elm.classList.add("hide");
});
}
function start() {
setInterval(fetchData, 2000);
}
start();
};
.hide {
visibility: hidden;
opacity: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(9, 1fr);
}
.dot {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #777777;
}
.dot:hover {
background-color: rgb(60, 255, 0);
opacity: 50%;
}
.dot:active {
background-color: #ff0000;
opacity: 50%;
}
#n786 {
position: relative;
grid-column: 3 / span 2;
grid-row: 6 / span 2;
}
#n787 {
position: relative;
grid-column: 6 / span 2;
grid-row: 6 / span 2;
}
#n788 {
position: relative;
grid-column: 9 / span 2;
grid-row: 6 / span 2;
}
#n789 {
position: relative;
grid-column: 12 / span 2;
grid-row: 6 / span 2;
}
#n790 {
position: relative;
grid-column: 15 / span 2;
grid-row: 6 / span 2;
}
<div class="grid">
<a id="n786" class="dot" href="#"></a>
<a id="n787" class="dot" href="#"></a>
<a id="n788" class="dot" href="#"></a>
<a id="n789" class="dot" href="#"></a>
<a id="n790" class="dot" href="#"></a>
</div>
- 1 回答
- 0 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消