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 元素点。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"}]超文本标记语言<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 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>