Html 在多个div上显示/隐藏而不定义div元素id

首先，我为糟糕的英语/语法感到抱歉

我正在创造一些你可以展示和隐藏的东西

但我的问题是，当我单击“显示/隐藏”时，它只会在两个按钮上显示输入框1。我希望它显示/隐藏每个框

我的问题是。我不想使用id来定义显示/隐藏元素 因为如果我有超过10个带有输入框的div，我必须用getElementById来定义它们，我不希望这样

我想当我点击show/hide时，它会显示没有getElementById的输入框 因此，即使我有超过10个输入框要显示，我也只需单击并显示/隐藏，而不定义其id

函数myFunction（事件）{
var x=document.getElementById（“mydv”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
x、 parentNode.insertBefore（x，event.target.nextSibling）；
}
document.addEventListener（'click'，函数（事件）{
if（event.target.className.includes（“dv1”））{
我的功能（事件）；
}
});

显示/隐藏


输入框1

显示/隐藏


输入框2

显示/隐藏

如果您想在页面上指定一个元素，该元素可以在任何方面与其他元素类似，除了文本内容或其他内容，实际上您需要一个id，因为JavaScript就是这样定义一个唯一的元素的

但您可以做的是，更改HTML按钮，以包含一个rel，这是一个属性，然后获取该属性并使用该属性指定要查找的元素id

然后，您可以调用函数并将“this”作为参数传递

HTML:

<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>

<script>

function hideShow(elem){

  var ele = document.getElementById(elem.getAttribute("rel"));

  if(ele.style.display == "none"){
    ele.style.display = "block";
  }
  else{
  ele.style.display = "none";
  }

}

</script>

显示/隐藏

JavaScript:

<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>

<script>

function hideShow(elem){

  var ele = document.getElementById(elem.getAttribute("rel"));

  if(ele.style.display == "none"){
    ele.style.display = "block";
  }
  else{
  ele.style.display = "none";
  }

}

</script>


函数隐藏（elem）{
var ele=document.getElementById（elem.getAttribute（“rel”）；
如果（ele.style.display==“无”）{
ele.style.display=“块”；
}
否则{
ele.style.display=“无”；
}
}

如果您绝对不喜欢使用ID，您可以使用子节点并通过数字指定哪个子节点，但这意味着如果您更改任何内容，您将破坏代码，这是愚蠢的。我建议使用唯一ID，并简单地以上述方式更改代码。
问题是getElementById引用具有该ID的第一个元素。它只会忽略其他所有内容。对多个元素使用相同的id是一种不好的做法。id应该是该元素的唯一引用，请改用class。
简短而懒惰地回答您的问题-如果您要保留当前的层次结构，只需在LI parentNode中找到DIV标记（因为它是唯一的DIV标记）

基本上是这样的-按按钮->将焦点从按钮更改为parentNode LI->查找DIV

简而言之-在
函数myFunction（event）
更改中

var x = document.getElementById("mydv");

到

工作示例：