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>&nbsp; &nbsp; <button id=".$i." class='myBtn'>?</button>&nbsp; &nbsp; <div id=".$i." class='modal'>对此或类似的东西：&nbsp;</br>&nbsp; &nbsp; <button id='button".$i."' class='myBtn'>?</button>&nbsp; &nbsp; <div id='div".$i."' class='modal'>请注意，我在 ID 号前面添加了一个描述符，以区分按钮和 div，然后使用相同的递增变量来确保每一对在描述符后获得相同的编号（例如：div1 与 button1 一起使用，等等）。您也没有将 ID 括在引号中。我在上面的示例修订版中将它们用单引号引起来。更改将生成如下 HTML 输出。&nbsp;</br>&nbsp; &nbsp; <button id='button1' class='myBtn'>?</button>&nbsp; &nbsp; <div id='div1' class='modal'>...&nbsp;</br>&nbsp; &nbsp; <button id='button2' class='myBtn'>?</button>&nbsp; &nbsp; <div id='div2' class='modal'>在您的 Javascript 代码中（感谢 @kerbholz），更改 ID 以匹配。我会以编程方式执行此操作（您在代码中使用静态值），但是最终结果应该像这样预先考虑您的指示符（但通过使用正确数字的代码）。var modal = document.getElementById("div1");var btn = document.getElementById("button1");不过，您没有将 id 号传递给脚本。您可以使用“this”或传递值或其他方法，因此您的按钮控制正确的两个元素。