单击时从类元素更改此样式属性

Question

const expandIt = document.querySelectorAll('.k-grid')
.forEach(el => el.addEventListener('click', () => {
  el.classList.add('pressed') // This wont work getting HTML obj etc in console
  console.log('pressed' + el)
  $(this).css({'white-space':'normal'}); // this works in console 
}))

以上是我所拥有的； 我只是想在当前点击的元素上将空白设置为正常。 我认为使用它会起作用 - classList 似乎不起作用，我猜从动态 elems 是如何/何时注入的。 我正在寻找纯 JS，或者理想情况下是 ES6。

Answer 1

添加event作为函数参数并设置el = event.target

 const expandIt = document.querySelectorAll('.k-grid') .forEach(el => el.addEventListener('click', (event) => { const el = event.target; el.classList.add('pressed') // This will work getting HTML obj etc in console console.log('pressed' + el); }))

 .k-grid {padding: 1em; float: left;} .pressed {font-weight: bold;}

 <div class="k-grid">Hello</div> <div class="k-grid">Hello</div> <div class="k-grid">Hello</div>

HTML DOM addEventListener() 方法

功能

必需的。 指定事件发生时要运行的函数。

当事件发生时，一个事件对象作为第一个参数传递给函数。 事件对象的类型取决于指定的事件。 例如，“click”事件属于 MouseEvent 对象。

^{大胆的强调我的}