AJAX 调用 - 动态 JSON 数据库数组 - 隐藏 HTML 元素

Question

我是一个超级兴奋的新手，一直坚持这个；到处都找不到这个，请帮忙：

如何使 vardotContainer成为 JSON DB 中的所有 id，以便使用 CSS“dot-hide”属性使所有匹配的 HTML id 元素不可见（与使用 getElementById 指定的这一个“n788”id 相对应）。

因此，使用新 id 值（如 n790 或 n786）动态更新的 JSON 数据库将使用 CSS“dot-hide”异步隐藏匹配的 HTML id 元素点。

JavaScript

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) {

        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"}]

超文本标记语言

<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

Answer 1

您必须添加和删除 css。样本：var dotContainer = document.getElementById("n788"); //THIS TO CONTAIN ALL ID VALUES FROM THE JSON DBvar dataRequest = new XMLHttpRequest();dataRequest.open(&nbsp; "get",&nbsp; "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json");dataRequest.onload = function() {&nbsp; var ourData = JSON.parse(dataRequest.responseText);&nbsp; //setInterval(function(){&nbsp; renderdata(ourData);&nbsp; //}, 1000);};dataRequest.send();function renderdata(dataobjectarray) {&nbsp; document.querySelectorAll("div a").forEach(x => {&nbsp; &nbsp; x.className = "dot";&nbsp; });&nbsp; var texString = "";&nbsp; for (i = 0; i < dataobjectarray.length; i++) {&nbsp; &nbsp; texString += dataobjectarray[i].id + ",";&nbsp; }&nbsp; dotContainer.insertAdjacentText("afterEnd", texString);}演示：window.onload = () => {&nbsp; function fetchData() {&nbsp; &nbsp; fetch(&nbsp; &nbsp; &nbsp; "https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json"&nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; .then(res => res.json())&nbsp; &nbsp; &nbsp; .then(renderdata);&nbsp; }&nbsp; function renderdata(data) {&nbsp; &nbsp; document.querySelectorAll("div a").forEach(x => {&nbsp; &nbsp; &nbsp; x.classList.remove("hide");&nbsp; &nbsp; });&nbsp; &nbsp; data.forEach(item => {&nbsp; &nbsp; &nbsp; const elm = document.getElementById(item.id);&nbsp; &nbsp; &nbsp; elm.classList.add("hide");&nbsp; &nbsp; });&nbsp; }&nbsp; function start() {&nbsp; &nbsp; setInterval(fetchData, 2000);&nbsp; }&nbsp; start();};.hide {&nbsp; visibility: hidden;&nbsp; opacity: 0;}.grid {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(16, 1fr);&nbsp; grid-template-rows: repeat(9, 1fr);}.dot {&nbsp; width: 40px;&nbsp; height: 40px;&nbsp; border-radius: 50%;&nbsp; background-color: #777777;}&nbsp;&nbsp;.dot:hover {&nbsp; background-color: rgb(60, 255, 0);&nbsp; opacity: 50%;}&nbsp;&nbsp;.dot:active {&nbsp; background-color: #ff0000;&nbsp; opacity: 50%;}#n786 {&nbsp; position: relative;&nbsp; grid-column: 3 / span 2;&nbsp; grid-row: 6 / span 2;}#n787 {&nbsp; position: relative;&nbsp; grid-column: 6 / span 2;&nbsp; grid-row: 6 / span 2;}#n788 {&nbsp; position: relative;&nbsp; grid-column: 9 / span 2;&nbsp; grid-row: 6 / span 2;}#n789 {&nbsp; position: relative;&nbsp; grid-column: 12 / span 2;&nbsp; grid-row: 6 / span 2;}#n790 {&nbsp; position: relative;&nbsp; grid-column: 15 / span 2;&nbsp; grid-row: 6 / span 2;}<div class="grid">&nbsp; &nbsp; <a id="n786" class="dot" href="#"></a>&nbsp; &nbsp; <a id="n787" class="dot" href="#"></a>&nbsp; &nbsp; <a id="n788" class="dot" href="#"></a>&nbsp; &nbsp; <a id="n789" class="dot" href="#"></a>&nbsp; &nbsp; <a id="n790" class="dot" href="#"></a></div>