Javascript 如果id对应，则显示元素

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

我用我现在得到的ultil（香草javascript）做了一个测试，但是没有效果，我认为这不是最好的解决方案

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";
    }
  }

}

函数funcao（idd）{ 设id=parseInt（idd） 让filhas=document.getElementById（“info”）。 querySelectorAll（“.filha”） 对于（变量i=0；i HTML:

诺姆
头号人物
沃利
123
娜达
321
伊达德
中央公积金
2.
45644654
10
121321321
伊达德
中央公积金
25
45644654
10
121321321

您的推理是正确的，您只是在

funcao

函数中有一个bug：您应该更改

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";
    }
  }

}

数组中的

find

方法允许获得满足条件的第一个元素。如果没有元素满足条件，则返回

未定义


因此，新版本使用
find
获取先前显示的行，如果确实存在显示的行，则将其隐藏，并最终显示
id
索引行

希望能有帮助-卡洛斯
哈哈，真是个愚蠢的错误。请理解我是在深夜做这件事的：（.回到代码，我不想使用loop来做这件事。难道没有任何方法可以获取具有
filhas[i].style.display=“block”
，将其设置为“none”，然后获取另一个具有**id=#idd**的子级，并设置这个display=“block”？顺便说一句，谢谢你的帮助。我在原始答案中添加了一种方法来实现你的要求。
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";
    }
  }

}

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";
}