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

Question

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

如果我有多个NRIC号码输入，我该如何设置它以获得模糊功能的选定字段并获得 dob 和年龄的值基于所选的模糊输入？以下是我做的例子，

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

然后我将每个项目都包含在“main”容器中，这样我就可以通过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>