年齢の自動計算スクリプトは最初の行でのみ動作します

Question

DOBに基づいて年齢を自動的に計算するこのスクリプトはありますが、残念ながら しか最初の行で動作しません。私はすでにスクリプトでクラスセレクタを使用していますが、問題を解決してください。

$(document).ready(function() { 
 
    $(".birthdate").change(function() { 
 
    var value = $(".birthdate").val(); 
 
    var dob = new Date(value); 
 
    var today = new Date(); 
 
    var age = Math.floor((today - dob)/(365.25 * 24 * 60 * 60 * 1000)); 
 
    if (isNaN(age)) { 
 
     age = 0; 
 
    } else { 
 
     age = age; 
 
    } 
 
    $('.age').val(age); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span> 
 
    <input type="date" class="form-control birthdate" aria-describedby="sizing-addon1" style="width:153.8%;" name="birthdate" required=""> 
 
</div> 
 

 

 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span> 
 
    <input type="text" class="form-control age" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" name="age" readonly=""> 
 
</div>

Answer 1

あなたはchangeで計算を取得するために、適切なbirthdateと.ageを取得するために$(this)を使用することができます。参照のために下のスニペットを確認してください。

$(document).ready(function() { 
 
    $(".birthdate").change(function() { 
 
    var value = $(this).val(); 
 
    var dob = new Date(value); 
 
    var today = new Date(); 
 
    var age = Math.floor((today - dob)/(365.25 * 24 * 60 * 60 * 1000)); 
 
    if (isNaN(age)) { 
 
     age = 0; 
 
    } else { 
 
     age = age; 
 
    } 
 
    $(this).closest('.input-group').next('.input-group').find('.age').val(age); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span> 
 
    <input type="date" class="form-control birthdate" aria-describedby="sizing-addon1" style="width:153.8%;" name="birthdate" required=""> 
 
</div> 
 

 

 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span> 
 
    <input type="text" class="form-control age" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" name="age" readonly=""> 
 
</div> 
 
<hr> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span> 
 
    <input type="date" class="form-control birthdate" aria-describedby="sizing-addon1" style="width:153.8%;" name="birthdate" required=""> 
 
</div> 
 

 

 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span> 
 
    <input type="text" class="form-control age" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" name="age" readonly=""> 
 
</div>

アップデート：か、スニペット以下のすべての.birthdateのチェックをループにしたい場合。

$(document).ready(function() { 
 
    $('.calcBtn').click(function() { 
 
    $(".birthdate").each(function() { 
 
     var value = $(this).val(); 
 
     var dob = new Date(value); 
 
     var today = new Date(); 
 
     var age = Math.floor((today - dob)/(365.25 * 24 * 60 * 60 * 1000)); 
 
     if (isNaN(age)) { 
 
     age = 0; 
 
     } else { 
 
     age = age; 
 
     } 
 
     $(this).closest('.input-group').next('.input-group').find('.age').val(age); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span> 
 
    <input type="date" class="form-control birthdate" aria-describedby="sizing-addon1" style="width:153.8%;" name="birthdate" required=""> 
 
</div> 
 

 

 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span> 
 
    <input type="text" class="form-control age" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" name="age" readonly=""> 
 
</div> 
 
<hr> 
 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span> 
 
    <input type="date" class="form-control birthdate" aria-describedby="sizing-addon1" style="width:153.8%;" name="birthdate" required=""> 
 
</div> 
 

 

 
<div class="input-group input-group-sm"> 
 
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span> 
 
    <input type="text" class="form-control age" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" name="age" readonly=""> 
 
</div> 
 
<hr> 
 
<input type="button" class='calcBtn' value="Calculate">

Answer 2

それは常に最初の要素を指すようになりますように主な問題は

var value = $(".birthdate").val(); 

であり、使用してみてください -

それが動作するはず

var value = $(this).val(); 

...