三元或更简洁的 setClass 等价物答案

【问题标题】：Ternary or terser setClass equivalent三元或更简洁的 setClass 等价物
【发布时间】：2013-02-25 11:58:41
【问题描述】：

我们有 addClass、removeClass、toggleClass

什么是jQuery等价于

document.getElementById("field").className=(someBoolean)?"pass":"fail";

但使用保留现有类的方法之一？

我认为最接近的不是那么优雅

$("#field")
  .toggleClass("pass",someBoolean)
  .toggleClass("fail",!someBoolean);

或者使用变量

$("#field")
  .toggleClass(classWhenTrue,someBoolean)
  .toggleClass(classWhenFalse,!someBoolean);

例子：

$(function() {
  var pass = true;

    $("#field")
    .toggleClass("pass", pass)
    .toggleClass("fail", !pass);
    var classes = [...$("#field").get(0).classList];
    console.log(classes)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input id="field" type="text" class="test fail done" />

【问题讨论】：

为什么双重toggleClass不那么优雅？它比你得到的任何答案都更具可读性......
这是一个 5 年前的问题。我可能只是好奇:)

标签： jquery ternary-operator

【解决方案1】：

这个？

$("#field").removeClass('pass fail').addClass(someBoolean ? 'pass' : 'fail');

【讨论】：

Closer :) 让我们看看有没有其他人有建议，你的建议是迄今为止最好的

【解决方案2】：

就这样做吧。

$('#field').attr('class', someBoolean ? 'pass' : 'fail');

.attr('class', 'newClass') 等价于element.className = 'newClass';

【讨论】：

我知道我可以做到这一点，但这取代了课程。正如我所提到的，我希望能够在 class 属性中包含其他类，这是 addClass、removeClass 和 toggleClass 所尊重的

【解决方案3】：

你可以试试这个：

$('.submit-button')[ someBoolean ? 'addClass' : 'removeClass' ]('active')

【讨论】：

@mplungjan 提问者的工作是创建一个 MCVE，以便人们可以更轻松地回答问题
@WhatsThePoint 完成
它不像我推测的那样工作。 $("#field")[ pass ? 'addClass' : 'removeClass' ]('pass') 不会切换两个类