Question

如何将这段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并在它们之间切换。

Answer 1

<强>更新在回复评论时， 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);
  });
}

运行代码段以尝试

＆＃13;

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;
  });
}
*/

＆＃13;

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

＆＃13;

click me:
<div id="box" class="class1 class3"></div>

<div id="stdout"></div>

＆＃13;

Answer 2

classNum是一个局部变量。

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

您希望它成为全局变量。

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

Answer 3

来自：You might not need jQuery

self.changeimage

替换为：

$(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(' '); }

中

Answer 4

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

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

Answer 5

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

＆＃13;

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

＆＃13;

.class1 {
  color: red;
}
.class2 {
  color: blue;  
}

＆＃13;

<div id="element">click me</div>

＆＃13;

Answer 6

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

Demo

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

  }

Answer 7

更新我的答案，支持每个元素的多个课程

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";
    }
}

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

7 个答案: