javascript - 按类将javascript应用于多个项目

Question

我有一些选择框要进行颜色编码。每行有 3 个，乘以 18 行。

对下拉列表进行颜色编码很容易，但我需要使用 Javascript 对所选项目的显示进行颜色编码。我拼凑了一个脚本来完成它，但仅适用于页面上的第一个脚本......它会将它们全部更改为相同的颜色。我需要脚本独立地应用于每个人。我是 Javascript 的初学者。我发现我需要使用 var i 东西，但我无法让它工作。

<td>
    <div>
        <select type="" name="tee_condition" class="selectcondition"  id="tee_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['tee_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['tee_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['tee_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['tee_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                    
        </select>                                               
    </div>
</td>
<td class="text-center">
    <div>
        <select type="" name="fairway_condition" class="selectcondition"  id="fairway_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['fairway_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['fairway_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['fairway_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['fairway_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                    
        </select>                                               
    </div>
</td>
<td class="text-center">                                                
    <div>
        <select type="" name="green_condition" class="selectcondition"  id="green_condition">
            <option style="color: #5cb85c;"  value="Excellent"<?php if($listresult['green_condition'] == 'Excellent'){echo 'selected';} ?> >Excellent</option>
            <option style="color: #0275d8;" value="Good"<?php if($listresult['green_condition'] == 'Good'){echo 'selected';} ?> >Good</option>
            <option style="color: #f0ad4e;" value="Fair"<?php if($listresult['green_condition'] == 'Fair'){echo 'selected';} ?> >Fair</option>
            <option style="color: #ff0000;" value="Poor"<?php if($listresult['green_condition'] == 'Poor'){echo 'selected';} ?> >Poor</option>                                  
        </select>                                               
    </div>
</td>

我的javascript是：

    //**** Script to Color the Dropdowns
$(document).ready(function () {
    colorSelect(); // call this first so we start out with the correct Color
    // this will call our function every time the selection value of the field changes
    $(".selectcondition").change(function () {
        colorSelect();
    });

});
// this changes the color of the selected item
function colorSelect() {
    if ($(".selectcondition").val() === "Excellent"){
        $('.selectcondition').css('color','#5cb85c');
    }else if($(".selectcondition").val() === "Good"){
        $('.selectcondition').css('color','#0275d8');
    }else if($(".selectcondition").val() === "Fair"){
        $('.selectcondition').css('color','#f0ad4e');
    }else {
        $('.selectcondition').css('color','#FF0000');
    }
}

标签： javascript

Answer 1

.css将设置所有匹配元素的 CSS。使用 迭代选择each，并获取对当前迭代的引用this。

if您还可以通过使用由选项值索引的对象而不是重复的/else语句来使代码更加简洁：

function colorSelect() {
  const colors = {
    Excellent: '#5cb85c',
    Good: '#0275d8',
    Fair: '#f0ad4e',
    Poor: '#FF0000'
  }
  $(".selectcondition").each(function() {
    $(this).css('color', colors[this.value]);
  });
}
colorSelect();
$(".selectcondition").change(colorSelect);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <div>
    <select type="" name="tee_condition" class="selectcondition" id="tee_condition">
      <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'tee_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
      <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'tee_condition']=='Good' ){echo 'selected';} ?> >Good</option>
      <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'tee_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
      <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'tee_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
    </select>
  </div>
</td>
<td class="text-center">
  <div>
    <select type="" name="fairway_condition" class="selectcondition" id="fairway_condition">
      <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'fairway_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
      <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'fairway_condition']=='Good' ){echo 'selected';} ?> >Good</option>
      <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'fairway_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
      <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'fairway_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
    </select>
  </div>
</td>
<td class="text-center">
  <div>
    <select type="" name="green_condition" class="selectcondition" id="green_condition">
      <option style="color: #5cb85c;" value="Excellent" <?php if($listresult[ 'green_condition']=='Excellent' ){echo 'selected';} ?> >Excellent</option>
      <option style="color: #0275d8;" value="Good" <?php if($listresult[ 'green_condition']=='Good' ){echo 'selected';} ?> >Good</option>
      <option style="color: #f0ad4e;" value="Fair" <?php if($listresult[ 'green_condition']=='Fair' ){echo 'selected';} ?> >Fair</option>
      <option style="color: #ff0000;" value="Poor" <?php if($listresult[ 'green_condition']=='Poor' ){echo 'selected';} ?> >Poor</option>
    </select>
  </div>
</td>