有可能在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代码中(感谢@cerbholz(，更改ID以匹配。我会以编程方式进行(您在代码中使用静态值(，但是，最终结果应该是像这样在指示符前面加上前缀(但通过使用正确数字的代码(。

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

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