代码之家 › 专栏 › 技术社区 › Deadpool

通过“Vanilla JavaScript”提供错误来添加和删除类

javascript

Deadpool · 技术社区 · 6 年前

在一个简单的例子中,我试图通过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>

2 回复 | 直到 6 年前

-1

Kiba 6 年前

三元运算符中有语法错误。你还需要使用 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"))
}

gautamits 6 年前

这是你要求的工作代码。请仅在使用JSX时使用三元运算符。在vanilla 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前