使用jQuery [duplicate]刷新后如何使用函数保持主题黑色

bq8i3lrv  于 2022-12-22  发布在  jQuery
关注(0)|答案(1)|浏览(90)
    • 此问题在此处已有答案**:

Keep Class toggled after Page Refresh(2个答案)
2天前关闭。
html部件

<div class="language_toggle">
        <div class="language_toggle_ar">
             <img src="assets/images/ar.svg" class="language_toggle_ar_img">
        </div>
       <div class="language_toggle_en">
          <img src="assets/images/en.svg" class="language_toggle_ar_img">
       </div>
    </div>

    <div class="theme_toggle">
            <div class="theme_toggle_light">
                 <img src="assets/images/light.png" alt="" class="theme_toggle_img">
            </div>
            <div class="theme_toggle_dark">
                 <img src="assets/images/dark.png" alt="" class="theme_toggle_img">
            </div>
        </div>

jquery部分

$('.theme_toggle_dark').click(function () {
        $('body').attr('class', 'dark');
    })
    $('.theme_toggle_light').click(function () {
        $('body').removeClass('dark');
    })

// language toggle 
    if(document.dir == "ltr"){
        $('.language_toggle_en').addClass("d-none");
        $('.language_toggle_ar').addClass("d-flex");
    }
    if(document.dir == "rtl"){
        $('.language_toggle_ar').addClass("d-none");
        $('.language_toggle_en').addClass("d-flex");
    }
    $('.language_toggle_ar').click(function () {
        $('html').attr('dir', 'rtl');
        $('body').addClass('rtl');
        $('.language_toggle_en').removeClass("d-none");
        $('.language_toggle_ar').addClass("d-none");
    })
    $('.language_toggle_en').click(function () {
        $('html').attr('dir', 'ltr');
        $('body').removeClass('rtl');
        $('.language_toggle_ar').removeClass("d-none");
        $('.language_toggle_en').addClass("d-none");
    })
    // language toggle

我希望当我刷新页面,如果我添加了一个黑暗的类,黑暗的身体类将继续与身体,如果我按下删除黑暗的类,然后黑暗的类应该从身体中删除,如果有人能解决这个问题,那么请解决它。如果你能解决语言切换请解决它,但黑暗是必须的。

zkure5ic

zkure5ic1#

使用本地存储。

$('.theme_toggle_dark').click(function() {
  $('body').addClass('dark');
  localStorage.setItem('darkClass', 'true');
});

$('.theme_toggle_light').click(function() {
  $('body').removeClass('dark');
  localStorage.removeItem('darkClass');
});

// Check if the 'darkClass' item exists in local storage on page load
if (localStorage.getItem('darkClass') === 'true') {
  $('body').addClass('dark');
}

这将在dark类添加到主体时将本地存储中的darkClass项设置为true,并在删除dark类时从本地存储中删除该项。
在页面加载时,代码将检查本地存储中是否存在darkClass项,如果存在,则将dark类重新应用于主体。

相关问题