javascript - 如果 id 对应则显示元素

Question

所以，我有以下情况。 如下图所示，我左边有一个表，每一行都与另一个整个表相关联。在右侧，我仅尝试显示与单击的行相关的表格。

我用我现在得到的 ultil 做了一个 codepen (用普通的 javascript)，但没有 woking，我不认为这是最好的解决方案。

Javascript:

function funcao(idd){
  let id = parseInt(idd)
  let filhas = document.getElementById("info").
                querySelectorAll(".filha")

  for(var i = 0; i < filhas.length; i++){
    if(i === id){
      console.log("block");
      filhas[id].style.display = "block";
    }
    else{
      console.log("none");
      filhas[id].style.display = "none";
    }
  }

}

HTML:

<div id="root">
  <table>
    <tr>
      <th>Nome</th>
      <th>Numero</th>
    </tr>
    <tr onclick="funcao(0)">
      <td>wally</td>
      <td>123</td>
    </tr>
    <tr onclick="funcao(1)">  
      <td>nada</td>
      <td>321</td>
    </tr>
  </table>

  <div id='info'>
    <table  class='filha' id='0' style='width: 100%;'>
    <tr>
      <th>Idade</th>
      <th>CPF</th>
    </tr>
    <tr>
      <td>2</td>
      <td>45644654</td>
    </tr>
    <tr>
      <td>10</td>
      <td>121321321</td>
    </tr>
  </table>

    <table class='filha' id='1' style='width: 100%;'>
    <tr>
      <th>Idade</th>
      <th>CPF</th>
    </tr>
    <tr>
      <td>25</td>
      <td>45644654</td>
    </tr>
    <tr>
      <td>10</td>
      <td>121321321</td>
    </tr>
  </table>    
  </div>
</div>

Answer 1

你的推理没问题，只是 funcao 函数中有一个错误:你应该更改 filhas[i] 的样式，而不是 filhas[id ]。即:

function funcao(idd){
  let id = parseInt(idd)
  let filhas = document.getElementById("info").
                querySelectorAll(".filha")

  for(var i = 0; i < filhas.length; i++){
    if(i === id){
      console.log("block");
      filhas[i].style.display = "block";
    }
    else{
      console.log("none");
      filhas[i].style.display = "none";
    }
  }

}

我在你的codepen上测试过，它似乎有效。

为了避免循环，可以使用Array接口(interface)；我强烈建议熟悉它。
在这种情况下，需要额外小心，因为 querySelectorAll 方法不返回 Array，而是返回 NodeList，这是一种不同但相似的对象。比照。 https://gomakethings.com/converting-a-nodelist-to-an-array-with-vanilla-javascript/ .
幸运的是，Array.from 方法可以轻松地从 NodeList 中获取 Array。

我们有:

function funcao(idd) {
    let id = parseInt(idd)
    let filhas = document.getElementById("info").
        querySelectorAll(".filha")
    const filhaAtual = Array.from(filhas).find(filha => filha.style.display === "block")
    if (filhaAtual) filhaAtual.style.display = "none"
    filhas[id].style.display = "block";
}

Array 中的 find 方法允许获取满足条件的第一个元素。如果没有元素满足条件，则返回undefined。
因此，新版本使用 find 获取先前显示的行，如果确实存在显示的行，则将其隐藏，最后显示 id 索引的行。

希望它有帮助 - 卡洛斯