如何用纯JavaScript取代jQuery的toggleClass方法？

如何将这段jQuery代码转换为JavaScript？

$('#element').click(function(){
    $(this).toggleClass('class1 class2')
});

我已经尝试过以下代码,但无济于事.

第一个是：

var element = document.getElementById('element'),classNum = 0; // Supposing I know that the first time there will be that class
element.onmousedown = function() {
    if (classNum === 0) {
        this.classList.remove("class1");
        this.classList.add("class2");
        classNum = 1;
    }
    else if (classNum === 1) {
        this.classList.remove("class2");
        this.classList.add("class1");
        classNum = 0;
    }
}

第二个是：

var element = document.getElementById('element'),classNum = 0; // Supposing I know that the first time there will be that class
element.onmousedown = function() {
    if (classNum === 0) {
        this.className -= "class1";
        this.classList += "class2";
        classNum = 1;
    }
    else if (classNum === 1) {
        this.classList -= "class2";
        this.classList += "class1";
        classNum = 0;
    }
}

任何不建议我坚持使用jQuery的答案将不胜感激.

[编辑]

我已经尝试了所有的解决方案,但未能做到正确.我相信这是因为我没有明确说明该元素有多个类,如下所示：

class="class1 class3 class4"

我想要的基本上是用class2替换class1并在它们之间切换.

最佳答案

更新：
作为对注释的回应,classList.toggle是一个纯粹的JavaScript解决方案.正如一条评论所暗示的,它与jQuery无关.如果需要支持旧版本的IE,则在下面的MDN链接上有一个垫片(pollyfill).如果需要,这个垫片远远优于公认的答案.

使用classList.toggle肯定是最简单的解决方案.另请参阅Can I Use classList以获取浏览器支持.

element.onclick = function() {
  'class1 class2'.split(' ').forEach(function(s) {
      element.classList.toggle(s);
  });
}

运行代码段尝试

Box.onclick = function() {
  'class1 class2'.split(' ').forEach(function(s) {
    Box.classList.toggle(s);
    stdout.innerHTML = Box.className;
  });
}


/* alternative 
Box.onclick = function() {
  ['class1','class2'].forEach(function(s) {
    Box.classList.toggle(s);
    stdout.innerHTML = Box.className;
  });
}
*/

.class1 { background-color: red;}
.class2 { background-color: blue;}
.class3 { width: 100px; height: 100px; border: 1px black solid;}

click me:
Box" class="class1 class3">

如何用纯JavaScript取代jQuery的toggleClass方法？

猜你在找的jQuery相关文章