javascript - CSS 下拉菜单颜色更改器(mutator)

Question

我有 3 个下拉菜单，它们正在更改网站上文本的颜色，问题是一旦我选择了文本，它就不会让我返回，例如如果绿色是下拉列表中的第三个，红色是第二个，蓝色是第一个，如果我选择绿色，我无法选择其他两个。

这是我的代码。我真的不应该附加到文档正文，您会如何建议我以另一种方式这样做？今天脑子不太正常

js

   $('#titlecolorChooser').change(function() {
        $('body').addClass($(this).val());
        //document.body.className = $(this).val();
    });
    $('#textcolorChooser').change(function() {
        $('body').addClass($(this).val());
        //  document.body.className = $(this).val();
    });
    $('#locationcolorChooser').change(function() {
        $('body').addClass($(this).val());
        //document.body.className = $(this).val();
    });

CSS

.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;}

html

Title Color
    <select 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>
    Text Colour
    <select 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>
    Location Color
    <select 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>

Answer 1

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

正如我在评论中所写，当您添加该类时，它会保留在那里，直到您将其删除。因此，您不必每次都检查主体有哪些颜色类，只需删除所有这些类并从每次更改的所有选择中添加类即可。

为所有选择设置一个公共(public)类，并在每个更改事件中将它们的值设置为正文的类。

 $(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 中并将类附加到其中。