javascript - 如何从javascript中节点列表中的单个元素切换类

Question

一旦你点击它，我试图将一个“隐藏”类切换为单个元素。这是我的代码，它用类切换所有元素。如何仅切换单击的元素？谢谢。

 <div class="card">
      <div class="card-body">
        <h5 class="card-title">pikachu</h5>
        <p class="card-text">lorem ipsum</p>
        <button id="btn" onClick="showSkills()" class="btn btn-primary">Skills</button>
      </div>
      <div id='text' class='skills hidden'>
       <p>skill skill</p>
      </div>
 </div>

我的 JavaScript 代码：

const showSkills = () => {

    Array.from(document.querySelectorAll('#text')).forEach((el) => el.classList.toggle('hidden'));
   
}

标签： javascriptarraysdomnodelist

Answer 1

您可以将单击的元素的 event.target 作为参数传递，试试这个：

const f = (el) => {
    console.log(el)
    el.classList.toggle('hidden')
}

<h5 class="card-title" onClick="f(event.target)">pikachu</h5>