Question

我正在尝试将eventlistener设置为按钮

<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

在所有现代浏览器（IE 10+）中，您可以使用classList及其toggle方法：

document.getElementById('btn').addEventListener('click', function (e) {
    test(e.target); // not sure why you need e.target?
}, false);

function test() {
    document.querySelector('.random ul').classList.toggle('newclass');
}

toggle就像jQuery的切换一样。

Answer 2

我赞赏你不使用jQuery。前段时间我自己参加了潜水。即使对于非常旧的浏览器，此脚本也可以解决您的问题：

＆＃13;

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

＆＃13;

.newclass { color: red; }

＆＃13;

<button id="btn">click me</button>

<div class="random">
  <ul>
    <li>Test</li>
  </ul>
</div>

＆＃13;

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

使用eventlistener添加和删除classname

2 个答案: