根据值更改 Javascript ID 的颜色答案

【问题标题】：Change the color of a Javascript ID depending on value根据值更改 Javascript ID 的颜色
【发布时间】：2017-05-10 05:40:18
【问题描述】：

我找到了一个 jquery 代码，可以根据输入的出生日期计算年龄。

<tr>
<td>Date of Birth:</td>
<td><input type="text" name="txtdob" class="manual" /> (yyyy-mm-dd)</td>
<td>Age:</td>
<td><input type="text" id="age" /></td>
</tr>

<script src="http://code.jquery.com/jquery.js"></script>

<script src='js/moment.min.js'></script>

<script>
function setAge(d) {
var age = moment().diff(d, 'years', true);
$('#age').val(Math.floor(age);
}

$(function() {
$('.manual').change(function() {
var isoDate = new Date($(this).val()).toISOString();
setAge(moment(isoDate));
});
});
</script>

我的问题是根据值更改年龄颜色的最佳方法是什么？例如，如果年龄低于 18 岁，我希望它显示为红色。

【问题讨论】：

基本if语句和比较...

标签： javascript jquery html css

【解决方案1】：

这会帮助你：

function setAge(d) {
        var age = Math.floor(moment().diff(d, 'years', true));
        $('#age').val(age);
        if(age<18)
           $('#age').addClass("age-error");  
       else 
             $('#age').removeClass("age-error");  
    }

    $(function () {
        $('.manual').change(function () {
            var isoDate = new Date($(this).val()).toISOString();
            setAge(moment(isoDate));
        });
    });

.age-error{
            color: red;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<tr>
        <td>Date of Birth:</td>
        <td><input type="text" name="txtdob" class="manual" /> (yyyy-mm-dd)</td>
        <td>Age:</td>
        <td><input type="text" id="age" /></td>
    </tr>

【讨论】：

【解决方案2】：

这对你有用。

function setAge() {      
  // Test the value
  if($("#age").val() < 18){
    // Style it appropriately
    $("#age").css("color", "red");
  } else {
       $("#age").css("color", "green");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<tr>
<td>Date of Birth:</td>
<td><input type="text" name="txtdob" class="manual" /> (yyyy-mm-dd)</td>
<td>Age:</td>
<td><input type="text" id="age" onchange="setAge()" /></td>
</tr>

如果你想立即改变颜色：

function setAge() {      
  // Test the value
  if($("#age").val() < 18){
    // Style it appropriately
    $("#age").css("color", "red");
  } else {
       $("#age").css("color", "green");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<tr>
<td>Date of Birth:</td>
<td><input type="text" name="txtdob" class="manual" /> (yyyy-mm-dd)</td>
<td>Age:</td>
<td><input type="text" id="age" onKeyUp="setAge()" /></td>
</tr>

【讨论】：

【解决方案3】：

function setAge(d) {
  $('#age').css('color', 'black');
  var age = moment().diff(d, 'years', true);
  $('#age').val(Math.floor(age));
  if ($('#age').val() < 18) {
    $('#age').css('color', 'red');
  }
}

$(document).ready(function() {
  $("#dob").datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    yearRange: '1972:2011',
    defaultDate: new Date("March 21, 1997")
  }).on("change", function() {
    var isoDate = new Date($(this).val()).toISOString();
    setAge(moment(isoDate));
  });
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet" />
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<body>
  DOB:
  <br/>
  <input type="text" id="dob" /> (yyyy-mm-dd)
  <br/> Age:
  <br/>
  <input type="text" id="age" />
</body>

【讨论】：

【解决方案4】：

只需使用 if/then 声明？

function setAge(d) {
  var age = moment().diff(d, 'years', true);
  var $age = $("#age");
  $age.val(Math.floor(age));

  // Test the value
  if($age.val() < 18){
    // Style it appropriately
    $age.css("color", "red");
  }
}

$(function() {
  $('.manual').change(function() {
    var isoDate = new Date($(this).val()).toISOString();
    setAge(moment(isoDate));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<tr>
<td>Date of Birth:</td>
<td><input type="text" name="txtdob" class="manual" /> (yyyy-mm-dd)</td>
<td>Age:</td>
<td><input type="text" id="age" /></td>
</tr>

【讨论】：

还是坏了。它不会改变字段的颜色。
@MikeC 是的，我知道。我正在研究它。现在可以了。
谢谢 Omi、Woodrow、JuMoGar、Mike C、Scott Marcus。为您带来更大的成功。