<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <cite>IRC logs: freenode / #whatwg / 20140523</cite>
( (<time>2014-05-25 18:42:17 +09:00</time> 版))
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://krijnhoetmer.nl/irc-logs/whatwg/20140523">http://krijnhoetmer.nl/irc-logs/whatwg/20140523</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> 
<code>toggle</code> の第2引数は <code>boolean</code> 型なのですが、
<code>false</code> のつもりで <code>undefined</code> を渡すと引数なし → 真、
と解釈されてしまう罠があります。</p><p>例えば、</p><pre class="JS code bad example">var opts = {};
if (...) {
  opts.enabled = true;
}
element.classList.toggle ('somewhat', opts.enabled);</pre><p>... は条件に合わせて <code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">class<title xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">class=&quot;&quot;</title></anchor>=&quot;somewhat&quot;</code>
を指定するかどうかを変えているつもりが、常に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">真</anchor>になってしまいます。</p><pre class="JS code good example">var opts = {enabled: false};
if (...) {
  opts.enabled = true;
}
element.classList.toggle ('somewhat', opts.enabled);</pre><p>... や、</p><pre class="JS code good example">var opts = {};
if (...) {
  opts.enabled = true;
}
element.classList.toggle ('somewhat', !!opts.enabled);</pre><p>... のように常に値が渡るようにする必要があります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> 
これ案外はまりがちなので注意。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> 
add, append, remove, delete みたいなの覚えるの難しいから <code>toggle</code> は1つ覚えておけばどっちだったか気にしなくていいというのが便利。</p></body></html>