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

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 .检查以下代码段以供引用。

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