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

Question

我正在尝试在您单击后将 class“隐藏”切换为单个元素。这是我的代码，它使用 class 切换所有元素。如何仅切换单击的元素？谢谢。

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

Answer 1

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

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

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

Answer 2

您可以使用 parentNode 获取点击按钮的 card-body 元素，然后获取它的邻居 #text 来切换它的 classList:

const showSkills = e => {
  const cardBody = e.target.parentNode;
  const skills = cardBody.nextElementSibling;
  skills.classList.toggle('hidden');
}

.hidden{display:none;}

<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(event)" class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
    <p>skill skill</p>
  </div>
</div>
<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(event)" class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
    <p><span>skill</span> <span>skill</span></p>
  </div>
</div>

Answer 3

据我了解，当单击一个元素（如按钮）时，您想在被单击的元素上切换 class 吗？

如果是这种情况，您会想做这样的事情。

HTML: 添加onClick功能时，将"this"作为参数。这会将被单击的对象作为参数发送到被调用的函数。

<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(this)" 
class="btn btn-primary">Skills</button>
  </div>
  <div id='text' class='skills hidden'>
   <p>skill skill</p>
  </div>
</div>

Javascript：这是单击对象时调用的函数。如您所见，它有一个参数，即被单击的对象。我们可以使用它并切换 class.

function showSkills(_this) {
    _this.classList.toggle('hidden');
}

这是一个 JSFiddle 示例：https://jsfiddle.net/vhu9xfLz/

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

How to toggle a class from a single element in a node list in javascript

javascript

arrays

dom

nodelist