我有一些段落。首先,其中一个应为红色,单击后应变为黑色,单击后应变为红色。我需要在单击每个段落时将其更改为红色,并在单击另一个段落时删除该类。我应该用 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>
最佳答案
你的代码很好,只是有一点逻辑问题:)
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>
关于javascript - 在没有 jquery 的情况下在 javascript 中添加和删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50943141/