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

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

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

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

解决方法

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

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

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

,

您可以使用card-body获取被点击按钮的parentNode元素，然后让其邻居#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>

,

据我所知，当点击一个元素时，比如一个按钮，你想在被点击的那个元素上切换一个类？

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

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：这是单击对象时调用的函数。如您所见，它有一个参数，即被单击的对象。我们可以接受这个并切换课程。

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

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