JQuery 改变主题

Question

我快完成了，创建了一个按钮来更改我页面的 CSS，并带有一个显示“更改主题”的按钮。我希望用户能够在 2 个“主题”之间来回切换。目前，该按钮工作一次并更改主题，但我无法将其更改回来。我已经尝试使用 .toggle 操作，但不能正确调用它，因为它只会让我的页面立即更改并带走按钮。关于将其添加到何处的建议？

    $(document).ready(function(){
      $('#themeButton').click(function(){
        $('#mcheader1').hide();
        $('#mcheader2').show();
        $('body').css('background-color', '#edd2fb');
        $('#focalimages').css('background-color','#540080');
        $('#focalimages').css('border-color', '#fce3f0');
        $('#container').css('border-color','#002aa7');
        $('#container').css('background-color','#fce3f0');
        $('#someID').css('border-color', '#002aa7');
        $('#someID').css('color', '#002aa7');
        $('ul').css('border-color', '#e70050');
      });
   });

Answer 1

您不能像那样简单地撤消样式更改——这就是发明 CSS 的原因。在正文(或其他一些共同的祖先元素)上使用一个类，如 Rory 所说，并用一行切换它。

body.otherTheme #mcheader1 {display: none;}
body.otherTheme #mcheader2 {display: block;}
body.otherTheme {background-color: #edd2fb;}
... 

$('#themeButton').click(function(){
    $(body).toggleClass('otherTheme');
});