jQuery 在 localStorage 时将 class 添加到正文

Question

我们使用以下JS代码来检查localStorage并保存它。

require(["jquery"], function (e) {
    const t = function () {
        const t = e("#togglebtw").is(":checked");
        e(".price-container .price-including-tax").toggle(!t), e(".price-container .price-excluding-tax").toggle(t), localStorage.setItem("togglebtw", t ? "true" : "false");
    };
    e(function () {
        e("#togglebtw")
            .on("click", t)
            .prop("checked", "true" === localStorage.getItem("togglebtw")),
            t();
    });
});

我们如何在检查#togglebtw 时也add/remove 一个class 到正文？

Answer 1

您可以随时使用此代码切换一个class到正文，例如使用btwChecked作为class。

e("body").toggleClass("btwChecked", "true" === localStorage.getItem("togglebtw"))

或者，使用复选框：

e("body").toggleClass("btwChecked", e("#togglebtw").is(":checked"))

（其中 e 对于 jquery 通常是 $）

因为你已经有 t = e("#togglebtw").is(":checked") 之后就变成了 e("body").toggleClass("btwchecked", t) t =.

这使用 toggleClass(className, state) 的重载，允许您传入布尔值以确定是否应添加或删除 class。

要将其添加到现有代码中：以类似的方式，mini-fied：

require(["jquery"], function (e) {
    const t = function () {
        const t = e("#togglebtw").is(":checked");
        e(".price-container .price-including-tax").toggle(!t), 
        e(".price-container .price-excluding-tax").toggle(t),
        localStorage.setItem("togglebtw", t ? "true" : "false"),
        e("body").toggleClass("btwChecked", t);
    };
    e(function () {
        e("#togglebtw")
            .on("click", t)
            .prop("checked", "true" === localStorage.getItem("togglebtw")),
        t();
    });
});

无需更改 doc.ready 函数，因为它会调用 t()

jQuery 在 localStorage 时将 class 添加到正文

jQuery add class to body when localStorage

jquery

local-storage