如何在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时只选择一个图标类？我想我需要在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-类

但是，如果在您的情况下不可能，并且想要使用JS，请使用element.addEventListener('click', function)而不是onclick，为此，您首先需要选择DOM中的元素：

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

您可以选择不同的元素或整个DIV，这取决于您希望可点击的区域，然后对要更改类的元素进行另一次选择。

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')
})
}