AJAX звонки - динамический c JSON массив дБ - для скрытия HTML элементов - с CSS свойством видимости

Question

Я очень взволнованный новичок, застрял на этом; не могу найти это нигде, помогите:

Как получить, чтобы var dotContainer был всеми идентификаторами из базы данных JSON, чтобы сделать все соответствующие элементы HTML id невидимыми, используя CSS свойство «dot-hide» (применимо только к этому одному «n788» идентификатору, указанному в getElementById).

Таким образом, база данных JSON, которая динамически обновляется с новыми значениями идентификаторов (например, n790 или n786) будет асинхронно скрывать совпадающие точки элемента HTML id с CSS «dot-hide».

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

HTML

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

CSS

.dot-hide {
  visibility: hidden;
  opacity: 0;
  transform: scale(.75);
}

.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;
}

Я сделал ручку здесь: https://codepen.io/andijonson/pen/gOpEmEQ

Большое спасибо, Анди

Answer 1

Вы должны добавить и удалить 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>