在ES6中单击时，在当前类元素上切换样式

Question

  var expandIt=document.getElementsByClassName('k-grid');  

  function expandClickcurrentNOTs () { 
      console.log('pressed'); // works
      console.log(e.target); // but need to add class to only class elem clicked
    }

  for (i = 0; i < expandIt.length; i++) {
    expandIt[i].addEventListener("click", expandClickcurrentNOTs);
  }

以上是我所拥有的；当我单击一个类元素时，我只是想添加一种样式。但是，仅针对特定的一种，而不是其他所有类元素。

Answer 1

使用Document.querySelectorAll()获取元素，该元素将返回静态Document.querySelectorAll()，您可以使用NodeList进行迭代。向每个元素添加一个事件处理程序，然后在处理程序中使用toggle来从元素的NodeList.forEach()中添加/删除类名。

classList
const expandIt = document.querySelectorAll('.k-grid')
  .forEach(el => el.addEventListener('click', () => {
    el.classList.toggle('pressed')
  }))
.k-grid.pressed {
  color: red;
}