时间戳

首页 > 解决方案 > jQuery：第一次单击时未添加类，但适用于后续单击

jquery - jQuery：第一次单击时未添加类，但适用于后续单击

问题描述

我试图在单击light-mode时切换 CSS 类#lights，并且我想将此更改存储到 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 的逻辑有关。

标签： jquerycookiesclick

解决方案

也许您可以修改您的方法以将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: '/' });
    });
});

推荐阅读