如何使用香草 Javascript 添加 classList？

Question

如何将 hover 上的 class 添加到 div 中，其中两个 div 具有相同的 class 名称。

这是我的 HTML。

<div class="selectable nature">
<span>Hello</span>
</div>

<div class="selectable nature">
<span>Hello</span>
</div>

我尝试使用 javascript 但这没有用

document.querySelector('.selectable.nature').addEventListener('mouseover', function(){
    var el = document.querySelector('.selectable.nature')
    el.classList.add("hover");
    el.classList.remove("nature");
});

document.querySelector('.selectable.hover').addEventListener('mouseout', function(){
    var el = document.querySelector('.selectable.hover')
    el.classList.remove("hover");
    el.classList.add("nature");
})

Answer 1

这边走

 document.querySelectorAll('.selectable.nature').forEach (el => { el.addEventListener('mouseover', function(){ el.classList.add("hover"); el.classList.remove("nature"); }) el.addEventListener('mouseout', function(){ el.classList.remove("hover"); el.classList.add("nature"); }) })

 .selectable { border: 1px solid darkblue; padding: .6em; margin: 1em; }.nature { background-color: yellow; }.hover { background-color: lightblue; }

 <div class="selectable nature"> <span>Hello 1</span> </div> <div class="selectable nature"> <span>Hello 2</span> </div>

Answer 2

当我不能使用已经包含它们的库时，我会使用这些 Vanilla ES6 javascript 方法。

如果需要，我可以将它们转换为 es2015。

export const addClass = (element, className) => {
  const cn = element.className
  //test for existence
  if (cn.indexOf(className) !== -1) {
    return
  }
  //add a space if the element already has class
  if (cn !== '') {
    className = ' ' + className
  }
  element.className = cn + className
}


export const hasClass = (element, className) => {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className)
}

export const removeClass = (element, className) => {
  const rxp = new RegExp('\\s?\\b' + className + '\\b', 'g')
  element.className = element.className.replace(rxp, '')
}