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

Question

我正在为我的网站设计一个雨果主题，这个主题有能力从亮模式切换到暗模式。我想要改变的图标，当主题是在光明时，黑暗模式被激活。

这是代码的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-sun“。

Answer 1

您可以将.toggle() jQuery方法添加到您的函数或单独的单击事件：$('.icon-sun, .icon-moon').toggle();。在本例中，您将切换它们的可见性。要获得更平滑的切换，也可以使用.fadeToggle()。

Answer 2

这个脚本可以做到这一点。将此代码添加到您的一个脚本标记中。将图标-facebook更改为您想要的图标。因为我不认为你正在做的主题有图标-月亮。如果你想，我可以告诉你如何添加额外的图标设置到主题。

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