Question

我使用jquery完成了这个，但不能用js。

看看我的代码：

https：// jsfiddle。净/ 88pd6zj0 /

它仅适用于first class =“html”，但不适用于另一个。我尝试在“querySelectorAll”上更改“querySelector” - 并且它没有任何一个类。

如何解决这个问题？谢谢。

Answer 1

尝试使用document.querySelectorAll（）

var icon = document.querySelectorAll(".buttons div");
for(i =0;i<icon.length;i++){
icon[i].addEventListener("click", function(event){

	event.preventDefault();
	this.classList.add("active");
});
}

.html, .html5, .css{
	width: 80px;
	height: 80px;
	border:1px dashed;
  display:inline;
  margin-left:10px;
}
.active{
  border:1px solid;
}

<div class="buttons">
	<div class="html ">
	  <a href="#">HTML</a>
	</div>
	<div class="html5" >
	  <a href="#">HTML 5</a>
	</div>
	<div class="css">
	  <a href="#">CSS 3</a>
	</div>
</div>

Answer 2

以下是切换课程的示例

var icon = document.querySelectorAll(".buttons div");
for (var i = 0; i < icon.length; i++) {
  icon[i].addEventListener("click", function(event) {
    event.preventDefault();
    if(this.className.includes("active")){  
      this.classList.remove("active");
    } else {    
      this.classList.add("active");
    }    
  });
}

这是工作的jsfiddle： https://jsfiddle.net/88pd6zj0/3/

如何使用js切换div的类？

2 个答案: