Question

首先很抱歉英语/语法不好

am在显示和隐藏的地方创建一些东西。

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

我的问题是。我不想使用id来定义show / hide元素因为如果我的输入框超过10格，则必须通过getElementById定义它们，我不想要那样。

当我单击“显示/隐藏”时，我希望它带来没有getElementById的输入框这样，即使我要显示的输入框超过10个，我也只能单击并显示/隐藏而不定义其ID

function myFunction(event) {
            var x = document.getElementById("mydv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            
            x.parentNode.insertBefore(x, event.target.nextSibling);
        }
        document.addEventListener('click', function(event){
        	if(event.target.className.includes("dv1")){
          	myFunction(event);
          }
        });

<!DOCTYPE html>
    <html>
    <head>
    <title> SHOW / Hide </title>
    </head>
    <body>
    <ul>
    <li>
    <div id="mydv" style="display:none;">	
    <p>input box 1
      <input type="text" name="textfield">
    </p>
    </div>
      <button class="dv1">SHOW/HIDE</button>
     </li>
     
     <li><div id="mydv" style="display:none;">	
      <p>input box 2
      <input type="text" name="textfield">
    </p> 
    </div>
      <button class="dv1">SHOW/HIDE</button></li>
    </ul>
    
    </body>
    
    </html>

Answer 1

如果要在页面上指定一个元素，该元素在任何方面都可能与其他元素（除了文本内容或其他内容）相似，实际上，您需要一个id，因为这是JavaScript定义唯一元素的方式。

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

然后您可以调用一个函数，并简单地将“ this”作为参数传递。

HTML：

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

JavaScript：

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

如果您绝对不喜欢使用ID，则可以使用子节点并通过数字指定哪个子节点，但这意味着如果您进行任何更改，都将破坏代码，这是愚蠢的。我建议使用唯一的ID，并以上述方式简单地更改代码。

Answer 2

问题是getElementById引用具有该ID的第一个元素。它只是忽略了其他所有内容。对多个元素使用相同的ID是一种不好的做法。 id应该是对该元素的唯一引用，请改用class。

Answer 3

对问题的简短且懒惰的回答-如果要保留当前的层次结构，则只需在LI parentNode内找到DIV标签（因为它是唯一的DIV标签）。

基本上就是这样-按下按钮->将焦点从按钮更改为父节点LI->找到DIV。

简而言之-在function myFunction(event)更改中

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

到

var x = event.target.parentNode.getElementsByTagName("DIV")[0];

工作示例： https://jsfiddle.net/w2a9zg46/1/

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

3 个答案: