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

迭代 class

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

JavaScript/CSS 从网格点击显示相应的 div

JavaScript/CSS Show respective div on click from grid

html

javascript

css

grid

electron