AJAX 调用 - 动态 JSON 数据库数组 - 隐藏 HTML 元素 - 具有 CSS 可见性属性

Question

我是一个超级兴奋的新手，坚持这一点；在任何地方都找不到这个，请帮助：

如何让 var dotContainer 成为 JSON DB 中的所有 id，以便使用 CSS“dot-hide”属性（仅适用于“n788”这个属性）使所有匹配的 HTML id 元素不可见用 getElementById 指定的 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"}]

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>