我是新手，仍然對我的問題感到困惑，所以這是我的 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";
});
我真的很感激你的幫助，非常感謝。
uj5u.com熱心網友回復：
首先，您應該為每個 HTML 元素使用唯一 ID，如果您打算創建多個具有相同行為的元素，請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>uj5u.com熱心網友回復：
你可以試試：
[].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";
}));
uj5u.com熱心網友回復：
ID 應該是唯一的。 你不應該在一個頁面中使用兩次相同的 id。類服務于這個目的。
所以首先，我們應該在每個按鈕上添加一個類，告訴我們這個按鈕是用來顯示模態的。我們還洗掉了 id，因為它不是唯一的，在這里也沒有用。
echo "<td><a href=\"#\" class=\"modal-button button\">View</a>";
然后，為了添加偵聽器，我們希望針對具有我們剛剛添加的這個新“模態按鈕”的每個按鈕。正確的方法是使用類定位元素，迭代它們并添加偵聽器。
document.getElementsByClassName(‘modal-button’).forEach(button => {
button. addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
});
})
希望這會有所幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/334748.html
標籤：javascript php html