foreach 循环内是否可以有一个模式按钮？

Question

我在 foreach 循环内有一个模式按钮，其中包含数据库中的行，但我只能按第一个按钮，因为它对于每个循环具有相同的值。我一直在尝试使用不断增加的 ID 值$i=0, $i++，但我无法让它工作。foreach($pdo->query("SELECT * FROM operation, OPuppgift where skift='natt' and klar='0' and operation.NR=OPuppgift.NR") as $row){  $i++;  echo "<tr>";  echo "<td>".$row['NR']."</td>";  echo "<td>".$row['kort_Uppgift']."  </br>    <button id=".$i." class='myBtn'>?</button>    <div id=".$i." class='modal'>      <div class='modal-content'>        <span class='close'>&times;</span>        <p>".$row['uppgift']."</p>          <script type='text/javascript' src='modalJ.js'></script>      </div>    </div>  </td>";var modal = document.getElementById("1");var btn = document.getElementById("1");var span = document.getElementsByClassName('close')[0];btn.onclick = function () {    modal.style.display = 'block';};span.onclick = function () {    modal.style.display = 'none';};window.onclick = function (event) {    if (event.target === modal) {        modal.style.display = 'none';    }};

Answer 1

不要对多个对象使用相同的 ID。您的 div 和按钮具有相同的 ID，并且也没有被引用。

改变这个：

</br>

    <button id=".$i." class='myBtn'>?</button>

    <div id=".$i." class='modal'>

对此或类似的东西：

 </br>

    <button id='button".$i."' class='myBtn'>?</button>

    <div id='div".$i."' class='modal'>

请注意，我在 ID 号前面添加了一个描述符，以区分按钮和 div，然后使用相同的递增变量来确保每一对在描述符后获得相同的编号（例如：div1 与 button1 一起使用，等等）。

您也没有将 ID 括在引号中。我在上面的示例修订版中将它们用单引号引起来。更改将生成如下 HTML 输出。

 </br>

    <button id='button1' class='myBtn'>?</button>

    <div id='div1' class='modal'>

...

 </br>

    <button id='button2' class='myBtn'>?</button>

    <div id='div2' class='modal'>

在您的 Javascript 代码中（感谢 @kerbholz），更改 ID 以匹配。我会以编程方式执行此操作（您在代码中使用静态值），但是最终结果应该像这样预先考虑您的指示符（但通过使用正确数字的代码）。

var modal = document.getElementById("div1");

var btn = document.getElementById("button1");

不过，您没有将 id 号传递给脚本。您可以使用“this”或传递值或其他方法，因此您的按钮控制正确的两个元素。