javascript - 在没有 jquery 的情况下在 javascript 中添加和删除类

Question

我有一些段落。一开始其中一个应该是红色的，点击后它应该变成黑色，点击一个应该变成红色。我需要在单击每个段落时将其更改为红色，并在单击另一个段落时删除该类。我应该用 javascript 来做

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){
	p[0].classList.remove("active");

	if( this.classList.contains("active")){
		this.classList.remove("active");
    } else{
    	this.classList.add("active");
    }
    
}

 .active{
    color: red;
  }

<p>Text First</p>
<p>Text Second</p>
<p>Text Third</p>

Answer 1

你的代码很好，就是逻辑有点问题:)

var p = document.querySelectorAll("p");
for( var i = 0; i < p.length; i++ ){
	p[i].addEventListener("click", makeRed);
	p[0].classList.add("active");
}

function makeRed(){
	if( this.classList.contains("active")){
		this.classList.remove("active");
    } else{
        for( var i = 0; i < p.length; i++ ){
            p[i].classList.remove("active");
        } 
    	this.classList.add("active");
    }
    
}

 .active{
    color: red;
  }

<p class="active">Text First</p>
<p>Text Second</p>
<p>Text Third</p>