以下代碼通過單擊圖示更改圖示，但我如何通過單擊 div 中的任意位置或單擊與圖示位于同一 div 中的鏈接來更改圖示。
html:
<div class="btn">
<i onclick="changeIcon(this)" class="far fa-square-plus"></i>
<a class="add" href="#">addon</a>
</div>
JavaScript：
changeIcon = (icon) => icon.classList.toggle("fas")
uj5u.com熱心網友回復：
我將使用 event.target 來獲取父節點，然后i使用它查詢元素e.target.parentNode.querySelector('i')將獲取目標元素，然后使用.classList.toggle("fas")在單擊時切換。
此外，我建議您在函式回呼中使用 eventListenerclick而不是行內 HTMLonclick屬性。
const btn = document.querySelector('.btn');
const changeIcon = (e) => e.target.parentNode.querySelector('i').classList.toggle("fas");
btn.addEventListener('click', changeIcon);.btn {
border: solid 1px black;
width: 200px;
padding: 2px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div class="btn">
<i class="far fa-square-plus"></i>
<a class="add" href="#">addon</a>
</div>uj5u.com熱心網友回復：
嘗試這個：
<div class="btn" onclick="changeIcon(this)">
<i class="far fa-square-plus"></i>
<a class="add" href="#">addon</a>
</div>
每當您在 div 內單擊時，這將觸發您的功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/515379.html
上一篇：使用Express.jsapp.get()方法發送html檔案時，無法識別位于外部檔案中的CSS和JS，但會部署html