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

}

我想在点击班级信息时显示。

问题是它总是给出相同的标题（第一个），就像总是第一个被点击的单元格

我这样显示信息 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';
  }