Question

我有3个下拉列表，它们正在改变网站上文字的颜色，问题是我选择了不会让我回去的文字，例如如果绿色是下拉列表中的第3个，红色是第2个，蓝色是第1个，如果我选择绿色，则无法选择其他两个。

继承我的代码。我真的不应该附加到文件机构，你会怎么建议我这样做呢？今天大脑如此无序

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

我建议以这种方式使用radiobuttons。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Source

Answer 2

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

正如我在评论中写的那样，当你添加课程时，它会一直保留在那里，直到你删除它为止。因此，不是每次检查身体所具有的彩色类，而是可以简单地删除所有这些，并在每次更改时添加所有选择的类。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当然这不是一个完美的解决方案，因为你可能还有其他课程，但正如我所说，这只是众多解决方案中的一个。

<强>更新

你不必将这些类附加到正文中。如果您愿意，可以将所有内容包装在div中并将类附加到其中。

Answer 3

对于第二种情况，如果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());
     });

    });

Css下拉换色器

3 个答案: