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>