是否可以在 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 output。

 </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 以匹配。 我會以編程方式執行此操作（您在代碼中使用 static 值），但是，最終結果應該像這樣在您的指示符之前添加（但通過使用正確數字的代碼）。

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

不過，您沒有將 ID 號傳遞給您的腳本。 您可以使用“this”或傳遞值或其他方法，因此，您的按鈕控制正確的兩個元素。