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

您可以使用$(this)获取适当的birthdate和.age来计算change。请查看下面的代码段以供参考。

＆＃13;

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

＆＃13;

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

＆＃13;

更新：，或者如果您想循环浏览以下所有.birthdate点击代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

所以主要问题是

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

因为它始终指向第一个元素，请尝试使用 -

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

它应该有用..

自动计算年龄脚本仅适用于第一行

2 个答案: