更改“正文背景颜色”。单击以在整个网站范围内应用并刷新？

Question

当用户在两个收音机之间切换时，我想在整个站点范围内更改主体的背景颜色（以及一些模式元素）。

这是单选按钮的html：

  <div class="btn-group btn-group-xs" data-toggle="buttons">
    <label class="btn btn-default lightBtn">
      <input type="radio" name="options" id="light"> Light
    </label>
    <label class="btn btn-default darkBtn">
      <input type="radio" name="options" id="dark"> Dark
    </label>
  </div>

而我为该事件尝试过的jQuery，尚未更改背景颜色。

$( function() {
   $('#lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('#darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

另外，在btns上的切换会在页面之间重置。.是否有jquery事件语言来维护切换选择跨页面？

Answer 1

您的HTML将lightBtn和darkBtn定义为标签元素的类（ . ），而jQuery则以ID为lightBtn和darkBtn （ # ）的元素为目标。

将它们更改为相同，例如：

$( function() {
   $('.lightBtn').click( function() {
     $('body').css('background', 'white' );    
   });
   $('.darkBtn').click( function() {
     $('body').css('background', 'black' );    
   });
});

jsFiddle在这里

或者只是将您的HTML标签更改为如下所示：

<label id="lightBtn" class="btn btn-default"> ...

<label id="darkBtn" class="btn btn-default"> ...