如何在javascript中选择和切换div内的元素答案

【问题标题】：How to select and toggle element inside the div in javascript如何在javascript中选择和切换div内的元素
【发布时间】：2021-04-02 10:11:37
【问题描述】：

我需要在 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 代码？

【问题讨论】：

onclick"myFunction()" 语法无效，并且缺少参数；此外，像onclick 这样的内联事件处理程序是not recommended。它们是一种obsolete, hard-to-maintain and unintuitive 注册事件的方式。总是use addEventListener。
使用event delegation而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用event argument 的target。见the tag info 和What is DOM Event delegation?。
这里的答案将帮助您了解如何做到这一点stackoverflow.com/questions/1369035/…
stackoverflow.com/questions/1369035/…这里的答案将帮助您了解如何做到这一点

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

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

但如果在您的情况下不可能并且想要使用 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

【讨论】：

【解决方案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')
   })
}

【讨论】：