如何 select 和切換 javascript 中 div 內的元素

Question

我需要在 div 元素內切換一個圖標。 對我來說，主要問題是每次用戶點擊 div 而不是圖標時都會發生切換。

HTML

<div class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

我一直在嘗試做的是在圖標或 div 中添加onclick事件，但它僅適用於自身。 <i onclick="myFunction(this)" class="fas fa-minus"></i>

那么我的 javascript 是

function myFunction(x) {
  x.classList.toggle("fa-plus");
}

在單擊整個 div 時，我怎樣才能 select 只有一個圖標 class ？ 我想我需要在 div 上使用 onclick 事件：

<div onclick"myFunction()" class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

但是我應該如何處理我的 javascript 代碼？

Answer 1

我希望這是你想要的。

 document.querySelector('.faq__questions-question').addEventListener('click', e => { const icon = e.currentTarget.querySelector('.fas'); icon.classList.toggle('fa-minus'); })

 .faq__questions-question { border: 1px solid black; }.fa-minus { color: red; }

 <div class="faq__questions-question"> <span>Lorem ipsum?</span> <i class="fas fa-minus">hi</i> </div>

Answer 2

如果可能，最好使用 CSS： https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes

但是，如果在您的情況下不可能並且想要使用 JS，請使用element.addEventListener('click', function)而不是onclick ，為此您首先需要 select DOM中的元素：

let selectedElement = document.querySelector('.fas');
selectedElement.addEventListener('click', function(){
  selectedElement.classList.toggle('fa-plus');
});

您可以 select 一個不同的元素或整個 DIV，具體取決於您想要可點擊的區域，然后對您想要更改 class 的元素進行另一個選擇。

let clickableElement = document.querySelector('.classClickableElement');
clickableElement.addEventListener('click', function(){
  let targetElement = document.querySelector('.classTargetElement');
  targetElement.classList.toggle('toggleClass');
});

您也可以在此處閱讀有關 querySelector 的信息： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 3

獲取子元素（省略標簽之間的空格）

HTML：

<div class="faq__questions-question" ><span>Lorem ipsum?</span><i class="fas fa-minus"></i></div>

JavaScript：

let c = document.getElementsByClassName("faq__questions-question")
for(let x of c) {
   x.addEventListener('click', function() {
      x.childNodes[1].classList.toggle('fa-minus')
   })
}