Question

在一个简单的示例中，我试图通过JS中的类来查找是否存在一个类，并基于其“切换”背景。代码有问题，有人可以解决吗？

function alpha() {
  document.querySelector('button').classList.contains('red') 
    ? (document.querySelector('button').addClass = 'blue'; document.querySelector('button').removeClass = 'red';) 
    : (document.querySelector('button').addClass = 'red'; document.querySelector('button').removeClass = 'blue';)
}

.red { background: red; }
.blue { background: blue; }

<button onclick="alpha()" class="red">ok</button>

Answer 1

这是您所要求的工作代码。请仅在使用JSX时使用三元运算符。在普通JS中，三元代码使代码不可读。

function alpha(){
  var node = document.querySelector('button');
  if(node.classList.contains('red')){
    node.classList.add('blue'); 
  	node.classList.remove('red');
  }
  else{
    node.classList.add('red');
  	node.classList.remove('blue');
  }
}

document.getElementById("button").addEventListener ("click", alpha, false);

.red {background: red;}
.blue {background: blue;}

<button id="button" class="red">ok</button>

Answer 2

三元运算符中存在语法错误。另外，您需要使用classList.remove删除该类

现在可以了

function alpha() {
  document.querySelector('button').classList.contains('red') ? 
    (
    document.querySelector('button').classList.add("blue"),
    document.querySelector('button').classList.remove("red") 
    )
  : (
    document.querySelector('button').classList.add("red"),
    document.querySelector('button').classList.remove("blue"))
}

通过“ Vanilla JavaScript”添加和删除类给出错误

2 个答案: