値に応じてJavaScriptの色を変更してください。

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

ちょうど使用して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>

Answer 2

これllがあなたを助けます：

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 3

これはあなたに動作します。

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>

あなたはinmediatlyその色が変化する場合：

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 4

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>