Question

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

问题是，切换仅对第一个元素有效。其他所有元素都搞砸了：默认情况下所有内容都是可见的，单击按钮时，它只会滚动到第一个元素。

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：

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

我宁愿使用纯JavaScript解决方案，但如果不可能，那么我也不介意使用jQuery。

感谢您的帮助！

Answer 1

正如@misorude所说，ID必须是唯一的，所以请改用类名。

JSFiddle example

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';
  });

});

Answer 2

使用jQuery .each（）：

$('.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();
});

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

2 个答案: