Question

我找到了一个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岁，我希望它以红色显示。

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

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

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

Answer 4

只需使用 if/then 声明吗？

＆＃13;

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

＆＃13;

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

＆＃13;

根据值更改Javascript ID的颜色

4 个答案: