Question

来自MDN：

toggle方法有一个可选的第二个参数，它将强制根据第二个参数的真实性添加或删除类名。例如，要删除某个类（如果它存在与否），您可以调用element.classList.toggle('classToBeRemoved', false);并添加一个类（如果它存在与否），您可以调用element.classList.toggle('classToBeAdded', true);

据我了解，classList是一个令牌列表，与数组不同，列表不能包含重复项。因此，将一个项添加到已有它的列表中并没有做任何事情，从一个不包含它的列表中删除一个项目（显然）没有做任何事情，这意味着classList.toggle(className, true)与{classList.add(className)相同1}}和classList.toggle(className, false)与classList.remove(className)相同。

我错过了什么吗？

P.S。无需警告IE兼容性问题。

Answer 1

它只会让你做这样的事情：

el.classList.toggleClass("abc", someBool);

而不是：

if(someBool){
    el.classList.add("abc");
} else {
    el.classList.remove("abc");
}

Answer 2

与classList.add（）/ remove（）不同，classList.toggle()在添加类时返回true，而在删除类时返回false - add（）和remove（）返回undefined。

FYI IE11不支持classList.toggle()的可选第二个添加/删除参数。

Answer 3

classList.toggle喜欢

el.classList.toggle("abc", someBool)

等效于：

let  hasClass  = el.classList.contains('abc')
  ;
if ( someBool && !hasClass ) el.classList.add('abc')
if (!someBool &&  hasClass ) el.classList.remove('abc')

更精确地说，具有返回值：

function ToggleForce( element, nameOfClass, condition )
  {
  let hasClass = element.classList.contains( nameOfClass )
    ;
  if ( condition != hasClass )
    {
    if (hasClass) element.classList.remove( nameOfClass )
    else          element.classList.add( nameOfClass )
    // hasClass = !hasClass
    }
  return condition // hasClass
  }

有关使用第二个自变量force的文档有些虚弱。最终，此条件的值确定是否应存在指定的类。
该参数的精妙之处在于，它首先检查是否真的需要执行[添加或删除]操作（节省几微秒？）。
与其他许多人一样，这有点违反直觉，我认为此布尔值用于验证/使Toggle操作无效，并且对于我来说，这肯定有点愚蠢，术语Toggle可能不够用，但现在我明白了，我明白了没有其他可能。

证明：
（带有一些要比较的元素）

function ToggleForce( element, nameOfClass, condition )
  {
  let hasClass = element.classList.contains(nameOfClass)
    ;
  if ( condition != hasClass)
    {
    if (hasClass) element.classList.remove(nameOfClass)
    else          element.classList.add(nameOfClass)
    // hasClass = !hasClass
    }
  return condition
  }

btAdd.onclick =_=> { pElem.classList.add('toYellow');   console.clear() }
btRem.onclick =_=> { pElem.classList.remove('toYellow');console.clear() }
btTog.onclick =_=>
  {
  let res = pElem.classList.toggle('toYellow')
  console.clear()
  console.log(`toggle simple  : return = ${res}`)
  }
btTo5.onclick =_=>
  {
  let res = pElem.classList.toggle('toYellow', val.valueAsNumber<5)
  console.clear()
  console.log(`toggle force:(value < 5)=${val.valueAsNumber<5}, return=${res}`)
  }
btToT.onclick =_=>
  {
  let res = pElem.classList.toggle('toYellow', true)
  console.clear()
  console.log(`toggle force:true, return=${res}`)
  }
btToF.onclick =_=>
  {
  let res = pElem.classList.toggle('toYellow', false)
  console.clear()
  console.log(`toggle force:false, return=${res}`)
  }
btForce.onclick =_=> 
  {
    console.clear()

  let condition  = (val.valueAsNumber < 5)
    , hasClass   = pElem.classList.contains('toYellow')
    ,  msg       = 'no change'
    , classOnOff = ToggleForce( pElem, 'toYellow', (val.valueAsNumber<5) )
    ;
  //
  if ( condition && !hasClass ) msg = ' add class'
  if (!condition &&  hasClass ) msg = ' remove class'
  console.log(`return=${classOnOff}, condition=${condition}, hasClass=${hasClass}, --> ${msg}`)
  }

.toYellow{ background: yellow; }

<p id="pElem">test zone for class .toYellow { background: yellow; } </p>

value : <input id="val" type="number" value="6">
<br><br>

<button id="btAdd"> Add class </button>
<button id="btRem"> Remove class </button>
<br><br>
<button id="btTog"> tooggle simple</button>
<button id="btTo5"> toggle('toYellow', value < 5) </button>
<br><br>
<button id="btToT"> tooggle true </button>
<button id="btToF"> tooggle false </button>
<br><br>
<button id=btForce> <b>toggle('toYellow', value < 5)</b> <br> simulated by Add / remove method </button>

element.classList.toggle中第二个参数的重点是什么？

3 个答案: