只有表的第一行可以使用(按钮)

Question

我是新来的，仍然对我的问题感到困惑，所以这里是我的php

表

<table>
<tr>
<th align="center">ID</th>
<th align="center">Project Name</th>
<th align="center">Due Date</th>
<th align="center">Sub Date</th>
<th align="center">Comment</th>
<th align="center">Status</th>
<th align="center">Option</th>
</tr>
<tr>

<?php

while ($res2=mysqli_fetch_assoc($result2)) {
echo "<tr>";
echo "<td>".$res2['project_id']."</td>";
echo "<td>".$res2['project_name']."</td>";
echo "<td>".$res2['duedate']."</td>";
echo "<td>".$res2['subdate']."</td>";
echo "<td>"".$res2['comment'].""</td>";
echo "<td>".$res2['status']."</td>";

//as you can see, id = myId
echo "<td><a href="#" id="myId" class="button">View</a>";
}?>
</td>
</tr>
</table>

当点击每一行旁边的按钮时，会出现一个弹出窗口，但只有第一行工作，其他按钮什么也不做。我确实搜索了这个问题2个小时了，他们中的大多数人都在谈论唯一id，但我该如何实现或修复这个问题。

这是一个脚本

document.getElementById('myId').addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
});

我真的很感激你的帮助，非常感谢。

Answer 1

首先，您应该使用唯一ID对于每个HTML元素，如果你想创建具有相同行为的多个元素，使用class代替。

当您将其更改为class后，您可以通过使用querySelectorAll()分配一次来选择所有元素工作。

下面是工作示例:

document.querySelectorAll('button.click').forEach(elem => 
{
elem.addEventListener('click', () => {
document.querySelector('div').style.background = elem.innerText;
});
});

div {
width: 200px;
height: 200px;
}

<button id="1" class="click">green</button>
<button id="2" class="click">blue</button>
<div></div>

Answer 2

你可以试试:

[].slice.call(document.querySelectorAll('[id^="myId"]'))
.map(el => el.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
}));

，你应该改变你的代码:

$i = 0;
while ($res2=mysqli_fetch_assoc($result2)) {
......
//as you can see, 
echo "<td><a href="#" class="class-{++$i}" class="button">View</a>";
}

， js代码:

[].slice.call(document.querySelectorAll('[class^="class-"]'))
.map(el => el.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
}));

Answer 3

id必须唯一您不应该在一个页面中使用两次相同的id。

首先，我们应该在每个按钮上添加一个类，告诉我们这个按钮是用来显示模态的。我们还删除了id，因为它不是唯一的，在这里也没有用。

echo "<td><a href="#" class="modal-button button">View</a>";

然后，要添加侦听器，我们希望针对每个具有我们刚刚添加的新"modal-button"的按钮。正确的方法是使用类定位元素，遍历它们并添加侦听器。

document.getElementsByClassName(‘modal-button’).forEach(button => {
button.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
});
})

希望这对你有帮助!