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

我是一个超级兴奋的新手，被困在这上面；在任何地方都找不到此，请帮助：

如何使var

dotContainer

成为JSON数据库中的所有id，以便使用CSS“dot hide”属性使所有匹配的HTML id元素不可见（仅适用于使用getElementById指定的这个“n788”id）

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

JavaScript

var dotContainer=document.getElementById（“n788”）；//这将包含JSON数据库中的所有ID值
var dataRequest=new XMLHttpRequest（）；
dataRequest.open（'get'，'https://raw.githubusercontent.com/sicronerver/sicronerve/master/dbn.json');
dataRequest.onload=函数（）{
var ourData=JSON.parse（dataRequest.responseText）；
//setInterval（函数（）{
renderdata（我们的数据）；
//}, 1000);      
};
dataRequest.send（）{
}
函数renderdata（dataobjectarray）{
var texString=“”
对于（i=0；i

JSON

[{"id":"n787"},{"id":"n788"},{"id":"n789"}]

HTML

CSS

.dot隐藏{
可见性：隐藏；
不透明度：0；
变换：比例（.75）；
}
.电网{
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（9，1fr）；
}
多特先生{
宽度：40px；
高度：40px；
边界半径：50%；
背景色：#777777；
}
.dot:悬停{
背景色：rgb（60255,0）；
不透明度：50%；
}
.dot:活动{
背景色：#ff0000；
不透明度：50%；
}
#n786{
位置：相对位置；
格构柱：3/2跨；
网格排：6个/跨度2；
}
#n787{
位置：相对位置；
格构柱：6/2跨；
网格排：6个/跨度2；
}
#n788{
位置：相对位置；
格构柱：9/2跨；
网格排：6个/跨度2；
}
#n789{
位置：相对位置；
格构柱：12根/跨2；
网格排：6个/跨度2；
}
#n790{
位置：相对位置；
格构柱：15根/跨2；
网格排：6个/跨度2；
}

我在这里做了一支笔：

---

非常感谢，Andi

您必须添加和删除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);
}

.hide{
可见性：隐藏；
不透明度：0；
}
.电网{
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（9，1fr）；
}
多特先生{
宽度：40px；
高度：40px；
边界半径：50%；
背景色：#777777；
}
.dot:悬停{
背景色：rgb（60255,0）；
不透明度：50%；
}
.dot:活动{
背景色：#ff0000；
不透明度：50%；
}
#n786{
位置：相对位置；
格构柱：3/2跨；
网格排：6个/跨度2；
}
#n787{
位置：相对位置；
格构柱：6/2跨；
网格排：6个/跨度2；
}
#n788{
位置：相对位置；
格构柱：9/2跨；
网格排：6个/跨度2；
}
#n789{
位置：相对位置；
格构柱：12根/跨2；
网格排：6个/跨度2；
}
#n790{
位置：相对位置；
格构柱：15根/跨2；
网格排：6个/跨度2；
}

---

您必须添加和删除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);
}

.hide{
可见性：隐藏；
不透明度：0；
}
.电网{
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（9，1fr）；
}
多特先生{
宽度：40px；
高度：40px；
边界半径：50%；
背景色：#777777；
}
.dot:悬停{
背景色：rgb（60255,0）；
不透明度：50%；
}
.dot:活动{
背景色：#ff0000；
不透明度：50%；
}
#n786{
位置：相对位置；
格构柱：3/2跨；
网格排：6个/跨度2；
}
#n787{
位置：相对位置；
格构柱：6/2跨；
网格排：6个/跨度2；
}
#n788{
位置：相对位置；
格构柱：9/2跨；
网格排：6个/跨度2；
}
#n789{
位置：相对位置；
格构柱：12根/跨2；
网格排：6个/跨度2；
}
#n790{
位置：相对位置；
格构柱：15根/跨2；
网格排：6个/跨度2；
}

Perfect，哇，非常感谢！有没有一种简单的异步运行方法？这样，当json数据库更改时，相关的点将被隐藏，而无需刷新页面。我尝试了

setInterval

，但它只写入已经加载到控制台的内容。非常感谢，我选择了一个非常好的答案nswer green，谢谢！如果您能回答异步方面的问题，我将非常感激，因为我知道这是一个单独的问题！非常感谢您，当您想获取？一些间隔？我每秒钟都在想？除非有另一种方法来检查数据库何时更新，因此在不刷新页面的情况下异步更改。PS我是新手and仍在学习=）非常感谢！太好了，哇，非常感谢！有没有一种简单的异步运行方法？这样当json数据库更改时，相关的点将被隐藏，而无需刷新页面。我尝试了

setInterval

，但它只写入已经加载到控制台的内容。许多谢谢，我把你非常好的答案勾为绿色，谢谢！如果你有关于异步方面的答案，我将非常感激，因为我知道这是一个单独的问题！非常感谢，如果你想获取？？某个间隔？？我每秒钟都想一次？？除非有其他方法检查数据库何时更新，因此在尽管没有页面刷新。PS我是个新手，还在学习=）非常感谢！