整天被困在這里試圖調試我的代碼有什么問題。為什么事件偵聽器只能在一個按鈕中工作？即使我在 querySelector 中使用類。我正在使用 PHP 來迭代我數據庫中的所有數據，因此按鈕也正在循環。PHP/HTML<?php foreach ($employees as $employee) { ?> <td><?php echo $employee['name']?></td> <td>Php. <?php echo $employee['salary']?></td> <td><?php echo $employee['address']?></td> <td> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> </td> <?php }?>JSdocument.querySelector('.showBtn').addEventListener('click', () => { alert("test"); })所有人的按鈕都<td>應該發出警報，但它只能在第一個按鈕中工作。有人可以啟發我嗎？
3 回答
千巷貓影
TA貢獻1829條經驗 獲得超7個贊
您可以使用querySelectorAll它將返回匹配的類列表，然后使用forEach循環遍歷classes和添加click事件。工作示例：
document.querySelectorAll('.showBtn').forEach(link => link.addEventListener('click', () => {
alert("test");
}))
<a href="#" class="btn btn-outline-info showBtn" name="showBtn"
id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a> <br/>
<a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a><br/>
<a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a>
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
querySelector只檢索第一個元素。使用querySelectorAll：
document.querySelectorAll('.showBtn').forEach(btn=>btn.addEventListener('click', () => {
alert("test");
}))
或者，將單個偵聽器添加到所有按鈕的父級。
<div id = "body">
<a href="#" class="btn btn-outline-info showBtn" name="showBtn"
id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a>
<a href="#" class="btn btn-outline-info showBtn" name="showBtn"
id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a>
<a href="#" class="btn btn-outline-info showBtn" name="showBtn"
id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View
Employee</a>
</div>
<script>
document.querySelector('#body').addEventListener('click', (e) => {
if(e.target.tagName === "A") //fire only if it's <a></a>
alert("test");
})
</script>
牛魔王的故事
TA貢獻1830條經驗 獲得超3個贊
用于選擇多 Dom 元素
Document 方法 querySelectorAll() 返回一個靜態（非活動）NodeList，表示與指定選擇器組匹配的文檔元素列表。
elements=[...document.querySelectorAll('.showBtn')];
elements.forEach((el)=>{
el.onclick=function(){
el.style.color='red';
console.log(el)
}
});
- 3 回答
- 0 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消