jQuery：类没有在第一次点击时添加，但适用于后续点击

Question

我在点击#lights时试图切换light-mode CSS类，我想将此更改存储到cookie中。 下面是我到目前为止所做的，但它要求用户点击两次才能正常工作：

jQuery(document).ready(function($) {
    if ($.cookie('light-mode') == "yes") {
        $("body").addClass("light-mode");
    }
    $("#lights").click(function() {
        if ($.cookie('light-mode') == "undefined" || $.cookie('light-mode') == "no") {
            $.cookie('light-mode', 'yes', {
                path: '/'
            });
            $("body").addClass("light-mode");
        } else {
            $.cookie('light-mode', 'no', {
                path: '/'
            });
            $("body").removeClass("light-mode");
        }
    });
});

除非我忽略了一些简单的事情，否则问题可能与我如何使用cookie的逻辑有关。

Answer 1

也许你可以修改你的方法来解耦light-mode类的切换，以及状态的持久性到这样的相应的cookie？

 jQuery(document).ready(function($) { if ($.cookie('light-mode') == "yes") { $("body").addClass("light-mode"); } $("#lights").click(function() { /* Toggle the class regardless of cookie state */ $("body").toggleClass("light-mode"); /* Update cookie value based on current class assignment */ $.cookie('light-mode', $("body").hasClass("light-mode") ? 'yes' : 'no', { path: '/' }); }); });