Question

我正在为我的网站开发一个Hugo主题，并且该主题具有从亮模式切换为暗模式的能力。启用暗模式时，我想在主题点亮时更改图标。

这是代码的javascipt部分：

_Blog.toggleTheme = function() {
        const currentTheme = window.localStorage && window.localStorage.getItem('theme')
        const isDark = currentTheme === 'dark'
        $('body').toggleClass('dark-theme', isDark)
        $('.theme-switch').on('click', () => {
            $('body').toggleClass('dark-theme')
            window.localStorage &&
                window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', )
        })
    }

这是HTML部分：

<a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-sun"></i></a>&nbsp;

我要解决的问题是，当我单击该图标时，它变为另一个图标。因此，点击时的“ icon-sun”可以变成“ icon-moon”。

Answer 1

您可以将.toggle() jQuery方法添加到函数或单独的单击事件中：$('.icon-sun, .icon-moon').toggle();在这种情况下，您将切换它们的可见性。为了使切换更流畅，您还可以使用.fadeToggle()。

Answer 2

此脚本将执行此操作。将此添加到您的脚本标签之一。将icon-facebook更改为所需的图标。因为我认为您正在处理的主题没有图标月亮。如果愿意，我可以向您展示如何向主题添加额外的图标集。

$('.theme-switch').click(function(){
$(this).find("i").toggleClass("icon-sun").toggleClass("icon-facebook");
});

如何在2个图标之间切换？

2 个答案: