classList.toggle（）

classList.toggle() 是用于在元素的 class 列表中切换指定类名的方法。如果元素中包含该类名，则该方法会删除该类名并返回 false，否则会添加该类名并返回 true。例如，以下代码将在元素的 class 列表中添加或删除名为 "active" 的类名：

var element = document.getElementById("myElement");
element.classList.toggle("active");

相关问题

switchCtn.classList.add("is-gx"); setTimeout(function () { switchCtn.classList.remove("is-gx"); }, 1500) switchCtn.classList.toggle("is-txr"); switchCircle[0].classList.toggle("is-txr"); switchCircle[1].classList.toggle("is-txr"); switchC1.classList.toggle("is-hidden"); switchC2.classList.toggle("is-hidden"); aContainer.classList.toggle("is-txl"); bContainer.classList.toggle("is-txl"); bContainer.classList.toggle("is-z");的意思

这段代码是在切换两个元素的显示和隐藏状态，以实现页面的交互效果。具体来说，这里的语句含义如下：

- `switchCtn.classList.add("is-gx")`：给 `switchCtn` 元素添加 `is-gx` 类，用于改变元素的样式；
- `setTimeout(function () { switchCtn.classList.remove("is-gx"); }, 1500)`：在 1.5 秒后移除 `switchCtn` 元素的 `is-gx` 类，恢复元素的原始样式；
- `switchCtn.classList.toggle("is-txr")`：切换 `switchCtn` 元素的 `is-txr` 类，用于改变元素的样式；
- `switchCircle[0].classList.toggle("is-txr")` 和 `switchCircle[1].classList.toggle("is-txr")`：切换 `switchCircle` 元素的 `is-txr` 类，用于改变元素的样式；
- `switchC1.classList.toggle("is-hidden")` 和 `switchC2.classList.toggle("is-hidden")`：切换 `switchC1` 和 `switchC2` 元素的 `is-hidden` 类，用于改变元素的显示和隐藏状态；
- `aContainer.classList.toggle("is-txl")` 和 `bContainer.classList.toggle("is-txl")`：切换 `aContainer` 和 `bContainer` 元素的 `is-txl` 类，用于改变元素的样式；
- `bContainer.classList.toggle("is-z")`：切换 `bContainer` 元素的 `is-z` 类，用于改变元素的样式。

以下代码改为jQuery形式； var cap = $('.film .capbtn') cap.click(function() { this.classList.toggle('check') this.children[0].classList.toggle('left-circle') this.children[0].classList.toggle('right-circle') if(this.classList.contains('check')) { this.nextSibling.nodeValue = '启用' } else { this.nextSibling.nodeValue = '禁用' } })

可以将原来的代码改写成以下的jQuery形式：

var cap = $('.film .capbtn');
cap.click(function() {
    $(this).toggleClass('check');
    $(this).children('i').toggleClass('left-circle right-circle');
    if($(this).hasClass('check')) {
        $(this).next().text('启用');
    } else {
        $(this).next().text('禁用');
    }
});

相比原来的代码，这里主要进行了如下几个改动：

1. 使用 `$()` 函数来选取元素，替换原来的 `document.querySelector()` 和 `document.querySelectorAll()`。
2. 使用 `.toggleClass()` 函数来添加或删除 class，替换原来的 `classList.toggle()`。
3. 使用 `.children()` 函数来选取子元素，替换原来的 `children` 属性。
4. 使用 `.text()` 函数来设置文本内容，替换原来的 `nodeValue` 属性。