Css下拉颜色改变器

有很多方法可以解决你的问题，我将向你展示其中的一种:

正如我在注释中所写的，当你添加类时，它会一直留在那里，直到你删除它。因此，您可以简单地删除所有的颜色类，并在每次更改时从所有的选择中添加这些类，而不是每次检查主体具有哪些颜色类。

为您的所有选择设置一个公共类，并在每个更改事件中将它们的值作为类设置到主体。

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

.blue1 h3 {
  color: blue;
}
.red1 h3 {
  color: red;
}
.green1 h3 {
  color: green;
}
.yellow1 h3 {
  color: yellow;
}
.blue2 p {
  color: blue;
}
.red2 p {
  color: red;
}
.green2 p {
  color: green;
}
.yellow2 p {
  color: yellow;
}
.blue3 h4 {
  color: blue;
}
.red3 h4 {
  color: red;
}
.green3 h4 {
  color: green;
}
.yellow3 h4 {
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Title Color</h3>
<select class="colorSelect" id="titlecolorChooser" ng-model="eventData.h3color">
  <option value="">Choose a Colour</option>
  <option value="blue1">Blue</option>
  <option value="red1">Red</option>
  <option value="green1">Green</option>
  <option value="yellow1">Yellow</option>
</select>
<p>Text Colour</p>
<select class="colorSelect" id="textcolorChooser" ng-model="eventData.pcolor">
  <option value="">Choose a Colour</option>
  <option value="blue2">Blue</option>
  <option value="red2">Red</option>
  <option value="green2">Green</option>
  <option value="yellow2">Yellow</option>
</select>
<h4>Location Color</h4>
<select class="colorSelect" id="locationcolorChooser" ng-model="eventData.h4color">
  <option value="">Choose a Colour</option>
  <option value="blue3">Blue</option>
  <option value="red3">Red</option>
  <option value="green3">Green</option>
  <option value="yellow3">Yellow</option>
</select>

当然，这不是一个完美的解决方案，因为你可能在身体上有其他类，但正如我所说，这只是众多解决方案之一。

更新:

不必将类附加到主体。如果您愿意，可以将所有内容包装在div中，并将类附加到其中。

我建议这样使用单选按钮。

var col, el;
$("input[type=radio]").click(function() {
   el = $(this);
   col = el.data("col");
   $("input[data-col=" + col + "]").prop("checked", false);
   el.prop("checked", true);
});

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <th></th>
    <th>Red</th>
    <th>Green</th>
    <th>Blue</th>
</tr>
<tr>
    <td>First</td>
    <td><input type="radio" name="row-1" data-col="1"></td>
    <td><input type="radio" name="row-1" data-col="2"></td>
    <td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
    <td>Second</td>
    <td><input type="radio" name="row-2" data-col="1"></td>
    <td><input type="radio" name="row-2" data-col="2"></td>
    <td><input type="radio" name="row-2" data-col="3"></td>
</tr>
    <td>Third</td>
    <td><input type="radio" name="row-3" data-col="1"></td>
    <td><input type="radio" name="row-3" data-col="2"></td>
    <td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>

对于第二种情况，如果您的body标记上有其他类，您可能不希望在添加新类时删除所有这些类。下面的代码只删除那些通过下拉选择添加的类。

    $(document).ready(function(){
        $('#titlecolorChooser').change(function() {
              $("#titlecolorChooser option").each(function(){
              if($('body').hasClass($(this).val()))
              {
                  $('body').removeClass($(this).val());
              }
          });
         $('body').addClass($(this).val());
     });
     $('#textcolorChooser').change(function() {
           $("#textcolorChooser option").each(function(){
           if($('body').hasClass($(this).val()))
           {
                $('body').removeClass($(this).val());
           }
        });
        $('body').addClass($(this).val());
     });
     $('#locationcolorChooser').change(function() {
         $("#locationcolorChooser option").each(function(){
         if($('body').hasClass($(this).val()))
         {
              $('body').removeClass($(this).val());
         }
        });
        $('body').addClass($(this).val());
     });
    });