javascript - Jquery - 多个模糊事件和输出值

Question

我有一个输入字段来插入用户身份号码(NRIC)。用户输入数字并失去焦点后，它会自动计算数字并给出出生日期和用户年龄的值。

如果我有多个身份证号码输入，我该如何设置它以获取模糊功能上的选定字段并获取出生日期和年龄的值基于所选的模糊输入？下面是我做的例子，

$(".ic_no").blur(function(){
 var d = new Date();
 var n = d.getFullYear();
    
 //Get value of NRIC No. eg: 870505115515 
 var ic_no = $("#ic_no").val();
 var dob = ic_no.substr(0, 6); //870505 
 var y = parseInt(dob.substr(0, 2)); //87 
    
 //Add value to get full year base on y value
 if (y > 20) {
  yearFull = "19" + y; 
 } else {
  yearFull = parseInt("20" + dob.substr(0, 2));
 }

 var m = dob.substr(2, 2); //05(Month)
 var d = dob.substr(4, 2); //05(Day)
 var f = yearFull + "-" + m + "-" + d;
		
 if (ic_no) { 
  $("#dob").val(f);

  if (yearFull > n) {
   var age = yearFull - n;	
  } else {
   var age = n - yearFull;		
  }

  if (age < 1) {
   age += 1; 
  }
			
  $("#age").val(age);
 }
		
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Item 1: 
<div class="form-group">
 <input type="text" name="ic_no[]" class="ic_no" id="ic_no" placeholder="NRIC No.">
</div>

<div class="form-group">
 <input type="date" name="dob[]" id="dob" class="form-control dob">
</div>

<div class="form-group">
 <input type="text" name="age[]" id="age" class="form-control age"  placeholder="Age">
</div>

<br>

Item 2:
<div class="form-group">
 <input type="text" name="ic_no[]" class="ic_no" id="ic_no" placeholder="NRIC No.">
</div>

<div class="form-group">
 <input type="date" name="dob[]" id="dob" class="form-control dob">
</div>

<div class="form-group">
 <input type="text" name="age[]" id="age" class="form-control age"  placeholder="Age">
</div>

根据代码，只有Item 1获取该值。

Answer 1

您对所有元素使用相同的id。 Id 应该是唯一的。

我对您的代码所做的是访问触发模糊事件的元素。

然后我将每个项目都包含在“主”容器中，以便我可以通过parent().parent().find()访问其他输入...

在我看来，这种方式有点难看，但使用您的代码是我想到的唯一解决方案!

检查一下并尽量不要对多个元素使用相同的 id。

干杯!

$(".ic_no").blur(function(event){
 var active_element = $(event.target);
 var d = new Date();
 var n = d.getFullYear();
    
 //Get value of NRIC No. eg: 870505115515 
 var ic_no = $(active_element).val();
 var dob = ic_no.substr(0, 6); //870505 
 var y = parseInt(dob.substr(0, 2)); //87 
    
 //Add value to get full year base on y value
 if (y > 20) {
  yearFull = "19" + y; 
 } else {
  yearFull = parseInt("20" + dob.substr(0, 2));
 }

 var m = dob.substr(2, 2); //05(Month)
 var d = dob.substr(4, 2); //05(Day)
 var f = yearFull + "-" + m + "-" + d;
		
 if (ic_no) {
  $(active_element).parent().parent().find("#dob").val(f);

  if (yearFull > n) {
   var age = yearFull - n;	
  } else {
   var age = n - yearFull;		
  }

  if (age < 1) {
   age += 1; 
  }
			
  $(active_element).parent().parent().find("#age").val(age);
 }
		
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Item 1: 
<div class="item">
  <div class="form-group">
   <input type="text" name="ic_no[]" class="ic_no" id="ic_no" placeholder="NRIC No.">
  </div>

  <div class="form-group">
   <input type="date" name="dob[]" id="dob" class="form-control dob">
  </div>

  <div class="form-group">
   <input type="text" name="age[]" id="age" class="form-control age"  placeholder="Age">
  </div></div>
<br>

Item 2:
<div class="item">
  <div class="form-group">
   <input type="text" name="ic_no[]" class="ic_no" id="ic_no" placeholder="NRIC No.">
  </div>

  <div class="form-group">
   <input type="date" name="dob[]" id="dob" class="form-control dob">
  </div>

  <div class="form-group">
   <input type="text" name="age[]" id="age" class="form-control age"  placeholder="Age">
  </div>
</div>