Jquery - 多模糊事件和输出值

Question

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

如果我对身份证号码多输入，怎么办我想将它设置为得到模糊函数所选择的领域，并得到DOB所选模糊输入值和年龄基地？下面是我做的例子，

$(".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; 
 
\t \t 
 
if (ic_no) { 
 
    $("#dob").val(f); 
 

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

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

<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应该是唯一的。

我对你的代码所做的一切就是访问已经触发模糊事件的元素。

然后我随信附上每个项目的“主”容器，所以我可以通过父访问其他输入（）。父（）。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; 
 
\t \t 
 
if (ic_no) { 
 
    $(active_element).parent().parent().find("#dob").val(f); 
 

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

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

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