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

根据条件添加或删除类

css html javascript

physicsboy · 技术社区 · 4 年前

classList 基于变量的真实性。然而,我用一种似乎很迟钝的方式:

if (myConditionIsMet) {
  myEl.classList.add("myClass");
} else {
  myEl.classList.remove("myClass");
}

有没有一种方法可以让这部电影更性感,更具动感,叫做 add / remove 链式函数,例如带有条件运算符的函数,例如:

myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};

2 回复 | 直到 4 年前

edo.n 4 年前

你的伪代码是js

myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};

可以翻译成实际的js

myEl.classList[myConditionIsMet ? 'add' : 'remove']('myClass');

这不是特别可读,但完全符合你所描述的。

为了便于阅读,我将查看 toggle 方法

Sebastian Simon SamB 4 年前

toggle 方法论 .classList 这需要第二个论点( force ). 此布尔参数本质上接受一个条件,如果为true,则添加类;如果为false,则删除类。

myEl.classList.toggle("myClass", myConditionIsMet);

推荐文章

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 年前