javascript - 使用事件监听器添加和删除类名

Question

我正在尝试将事件监听器设置为一个按钮

<button id="btn">click me</button>

document.getElementById('btn').addEventListener('click', function (e) {
test(e.target);
}, false);

并且每次点击被触发时，另一个 HTML 元素(.random ul)将获得一个新类 my class 或将其删除(在第二次点击时)

function test() {
document.querySelector(".random ul").className = document.querySelector(".random ul").className += ' newclass'
    ? '' //need to remove the newclass
    : ''; //need to add the newclass
}

这显然行不通。我还发现以下脚本可以正确删除添加的类名:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
//from: http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript

我真的不知道如何让它工作，想请你帮我解决。

Answer 1

我为你不使用 jQuery 鼓掌。前段时间我自己去潜水了。这个脚本可能会解决您的问题，即使对于非常旧的浏览器也是如此:

function toggleClass (el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    if (el.className.match(new RegExp('(^|\\s)'+className+'(\\s|$)','g'))) {
      el.className = el.className.replace(new RegExp('\\s?' + className), '');
    }
    else {
      el.className += ((el.className !== '') ? ' ' : '') + className;
    }
  }
}


document.getElementById('btn').addEventListener('click', function (e) {
  toggleClass(document.querySelector('.random ul'), 'newclass');
}, false);

.newclass { color: red; }

<button id="btn">click me</button>

<div class="random">
  <ul>
    <li>Test</li>
  </ul>
</div>

哦，要获得更多 Vanilla-JS 的东西，请从 http://youmightnotneedjquery.com/ 中获得灵感或者我在 https://github.com/fboes/js-toolshed/blob/master/src/js-toolshed.js 的个人实验