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

How do I supplant jQuery's toggleClass method with pure JavaScript?

本文关键字：toggleClass 方法 jQuery 取代 何用纯 JavaScript      更新时间：2023-09-26

如何将这段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当然似乎是最简单的解决方案。另请参阅是否可以使用 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:
<div id="box" class="class1 class3"></div>
<div id="stdout"></div>

classNum是一个局部变量。

每次调用事件处理程序时，您都会得到一个新变量，该变量与上次调用的值无关。

您希望它是一个全局变量。

或者，更好的是，改为检查classList.contains。

来自： 你可能不需要 jQuery

$(el).toggleClass(className);

替换为：

if (el.classList) {
  el.classList.toggle(className);
} else {
  var classes = el.className.split(' ');
  var existingIndex = classes.indexOf(className);
  if (existingIndex >= 0)
    classes.splice(existingIndex, 1);
  else
    classes.push(className);
  el.className = classes.join(' ');
}

然后只需将该函数调用包装在document.getElementById('elementId').click

参见 小提琴：https://jsfiddle.net/2ch8ztdk/

var s = document.getElementById('element');
s.onclick=function(){
  if(s.className == "class1"){
    s.className = "class2"
  } else {
    s.className = "class1"
  }
}

你的代码很接近，但你的classNum变量不是迭代的。试试这个：

var element = document.getElementById("element");
var numCount = 0;
element.addEventListener('click', function() {
	if (numCount === 0) {
		this.className = "";
        this.className += " class1";
        numCount++;
	} else {
        this.className = "";
		this.className += " class2";
        numCount = 0;
	}
});
.class1 {
  color: red;
}
.class2 {
  color: blue;  
}
<div id="element">click me</div>

你可以

使用classList，但它只支持IE 10+

演示

  var eles = document.querySelectorAll('#element');
  var classNames = 'one two';
  for(var i = 0; i < eles.length; i ++){
    eles[i].onclick = function(e){
      toggleClass.call(this, classNames);
    }
  }
  function toggleClass(names){
    var sp = names.split(' ');
    for(var i = 0; i < sp.length; i++){
      this.classList.toggle(sp[i]);
    }
  }

更新了我的答案以支持每个元素的多个类

https://jsfiddle.net/pwyncL8r/2/现在，这将允许元素已经有 n 个类，并且仍然只交换一个类，保留其他类。

.HTML 

<div id="div1" style="width: 100px; height: 100px;" class="backBlack left100"</div>
<input type="button" id="swapButton" value="Css Swap" />

.CSS

.backBlack {
    background-color: black;
}
.backRed {
    background-color: red;
}
.left100 {
    margin-left: 100px;
}

.JS

swapButton.onclick = function() {
    var curClassIsBlack = (' ' + document.getElementById("div1").className + ' ').indexOf(' backBlack ') > -1
    if (curClassIsBlack) {
        document.getElementById("div1").className =
        document.getElementById("div1").className.replace(/(?:^|'s)backBlack(?!'S)/g, '')
        document.getElementById("div1").className += " backRed";
    } else {
        document.getElementById("div1").className =
        document.getElementById("div1").className.replace(/(?:^|'s)backRed(?!'S)/g,'')
        document.getElementById("div1").className += " backBlack";
    }
}
相关文章：