javascript - 单击按钮可更改面板标题

我有这个按钮，它可以更改网站的颜色（文本等），我想更改面板标题的背景颜色。

目前，该按钮可在AFO上使用。继承人的样式表

.AFO { background-color: #fff;}
.AFO h1 { color: #00159d; }
.AFO h2 { color: #00159d; }
.AFO h3 { color: #00159d; }
.AFO h4 { color: #00159d; }
.AFO h5 { color: #00159d; }
.AFO h6 { color: #00159d; }
.AFO p { color: #00159d; }
.AFO th { background-color: #c3cced; color: #00159d;}
.AFO panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

HTML
<div class="panel-heading orange ct-orange" ng-class="colorScheme">Details</div>

我有该按钮的工作，我会向您展示JavaScript，但我找不到它:(

当我检查元素时，AFO被添加到班级的末尾，它非常持久地保持橙色（其原始颜色）

到目前为止，我能够更改面板颜色的唯一方法是通过在CSS中将顶行更改为此
.AFO { background-color: #fff; background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

任何想法都很棒！请让我知道您是否需要什么，我将继续搜索按钮！！！

找到了JS

    $(function() {
  $(".colorSelect").change(function() {
    $("body").attr('class', '');
    $(".colorSelect").each(function() {
      $("body").addClass($(this).val());
    });
  });
});

最佳答案

您没有添加.来定位该class元素

从

.AFO panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

至

.AFO .panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

更新资料

由于在该元素上添加了AFO，因此请使用.AFO.panel-header而不使用空格，而不仅仅是.AFO .panel-header。

.AFO.panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

更新资料

类的名称是panel-heading而不是panel-header

您的CSS应该改为：

.AFO.panel-heading { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}

Fiddle