Javascript 如何在同一页面上使用具有相同ID的多个（动态）切换按钮？

我的PHP代码中有一个来自数据库的动态输出。 在代码中，我有一个切换按钮，它被添加到每个输出元素中

问题是，toggle仅对第一个元素正常工作。 所有其他元素都是乱七八糟的：默认情况下，所有元素都是可见的，当单击按钮时，它只会滚动到第一个元素

PHP/HTML：

<?php
  while ($row = mysqli_fetch_array($result)) {
    echo "<div class='details'>
              <h4>".$row['image_text']."</h4>
          <input type='submit' id='title_btn' onclick='changeTitle(this)' value='Edit title'>";
    echo "<form action='edittitle.php' method='POST' id='newtitle' autocomplete='off'>
              <input type='text' name='newtitle' value='".$row['image_text']."'/>
              <input type='submit' name='edit' id='title_btn2' value='Save title'>
          </form>";
          </div>";
  }
?>

我更喜欢纯JavaScript解决方案，但如果不可能，我也不介意使用jQuery

感谢您的帮助

使用jQuery.each（）：

---

正如@misorude所说，ID必须是唯一的，所以用类名代替

---

ID在HTML文档中必须是唯一的，不能对多个元素使用相同的ID。这可能应该更改为使用类而不是ID的版本，然后根据它们在DOM中的位置/相互关系访问“正确”的元素。您可以复制您的SIM卡并在不同的设备上使用相同的号码，但只有一个可以使用。对于多个表单并不真正起作用：/单击一个表单时，其余的表单会被弄乱。更新您的JSFIDLE以显示发生了什么：哦，对不起，我的错。更新：）注意，为了方便起见，我阻止表单重定向：当我单击文本输入字段时，它会隐藏表单，并且我无法输入新标题。我打赌这个解决方案很简单，但我想不出来lI已经更新了它，它现在不会隐藏表单，并且工作正常。

window.onload = function() {
    document.getElementById('newtitle').style.display='none';
    document.getElementById('title_btn2').style.display='none';
}

function changeTitle(eref) {
    var x = document.getElementById('newtitle');
    eref.style.display = 'none';
    var btn;
    if (eref.id == 'title_btn') {
        btn = document.getElementById('title_btn2');
        x.style.display = 'inline-block'
    } else {
        btn = document.getElementById('title_btn');
        x.style.display = 'none';
    }
    btn.style.display = 'inline-block';
}

$('.ClassName').each(function(){
    // get current element
    var it = $(this); 
    // hide, show ...
    it.hide();
    it.show();
    // show element -> parent -> children with class .benny
    it.parent().children('.benny').show();
});

var editToggler = document.querySelectorAll('.title_btn');
var forms = document.querySelectorAll('.newtitle');
var savebtn = document.querySelectorAll('.title_btn2');


editToggler.forEach(function(btn) {
  btn.addEventListener('click', function() {

    btn.parentElement.querySelector('.newtitle').style.display = 'block';

    btn.style.display = 'none';
  });
});

forms.forEach(function(f) {
  f.addEventListener('submit', function(e) {
    e.preventDefault();
  });
});

savebtn.forEach(function(btn) {
  btn.addEventListener('click', function() {

    btn.parentElement.style.display = 'none';
    btn.parentElement.parentElement
      .querySelector('.title_btn')
      .style.display = 'block';
  });

});