javascript - JavaScript/CSS在单击网格时显示相应的div

Question

我有一个工作的网格，为json中的每个标题显示一个单元格:

async function loop_iteration(json, i, arr) {
    arr.push(`<a onClick="show()" class="cell" id=${i}"><div >${json[i].title}</div> </a>`)
    arr.push(`<div class="info" id=${i}>${json[i].title}<br><br><br><br><br>Game Size: ${json[i].size}<br><br>Last Update: ${json[i].date}</div>`)

}

我想在点击类(class)信息时显示。
问题是它总是给出相同的标题(第一个)，就像总是第一个要单击的单元格一样
我显示如下信息div:

 <script>
      function showinfo() {
      var node = document.querySelector('.cell.info')
      var visibility = node.style.visibility;
      node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
      }
    </script>

而如果我使用此显示div:

function show(){
        var divsToHide = document.getElementsByClassName("info");
        for(var i = 0; i < divsToHide.length; i++)
        {
        divsToHide[i].style.visibility="visible";
        }

        //document.getElementsByClassName('info')['${i}'].style.visibility = 'visible';
    


      }

发生一些奇怪的事情，显示的div不是第一个，而是像它显示了所有的div
谢谢你的帮助。

Answer 1

我找出问题所在。
这是JavaScript，因此我提取了ID，然后用ID迭代了类

    function show(clicked_id){
    clicked_id = parseFloat(clicked_id);
    document.getElementsByClassName('info')[clicked_id].style.visibility = 'visible';
  }