使用jquery設置輸入值

Question

我想創建一個簡單的html文件，其中包含員工的月薪，並且必須計算每個工資的應納稅額！我使用「添加」按鈕來添加更多員工文本框，從而創建一個包含類似div的新類div！在工資textfield的onchange事件中，我無法設置相應員工的稅值！

不幸的是，我無法上傳截圖，所以我把所有的代碼，使我的問題儘可能清晰！

這是html代碼：

<div id="all_emps"> 
    <div class="em_area"> 
     <label>Employee 1</label> 
     <input type=text required /> 
     <label>Position</label> 
     <input type=text required /> 
     <label>Monthly Salary</label> 
     <input class=em_sal type=text required size=10 /> 
     &nbsp &nbsp &nbsp 
     <label>Salary Tax</label> 
     <input class=em_tax type=text required size=10 readonly /> 
     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
     <a href="#" id="add_emp">Add</a> 
     &nbsp &nbsp &nbsp &nbsp &nbsp 
     <a href="#" id="del_emp">Remove</a> 
    </div> 
</div> 

這裏是jQuery代碼：

$(document).ready(function(){ 
var counter = 2; 
$("#add_emp").click(function() { 
var newTextBoxDiv = $(document.createElement('div')) 
    .attr("class", 'em_area' + counter); 

newTextBoxDiv.after().html('<br><label>Employee '+counter+' </label> <input id=em_name name=em_name type=text required /> <label>Position</label> <input id=em_post name=em_post type=text required /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required /> '); 
newTextBoxDiv.appendTo("#all_emps"); 
counter++; 
}); 

$("#del_emp").click(function() { 
if(counter==2) 
{ 
    alert("Can not remove the only employee!"); 
} 
else{ 
    counter--; 
    $(".em_area" + counter).remove(); 
} 
}); 
    $('#em_area').on('change' , '.em_sal', function() { // Fire the change event 

var salary = parseInt(this.value); 
var dueTax = 0; 
if(salary < 5000){ 
    alert('Salary less than 5000!!'); 
} 
else if(salary >= 5000) 
{ 
    due_tax= salary/100; 
    due_tax= salary - due_tax; 
} 
// This will get the corresponding tax input for the employee.. 
$(this).closest('div').find('.em_tax').val(due_tax) ; 
}); 
}); 

Answer 1

重構了一下。你現在一個all_emps格，每位員工一個div，與id="em<counter>"

JsFiddle

HTML的一部分：

<div id="all_emps"> 
    <div id="em1"> 
     <label>Employee 1</label> 
     <input type=text required /> 
     <label>Position</label> 
     <input type=text required /> 
     <label>Monthly Salary</label> 
     <input class=em_sal type=text required size=10 /> 
     &nbsp &nbsp &nbsp 
     <label>Salary Tax</label> 
     <input class=em_tax type=text required size=10 readonly /> 
     &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 

    </div> 
    <a href="#" id="add_emp">Add</a> 
     &nbsp &nbsp &nbsp &nbsp &nbsp 
    <a href="#" id="del_emp">Remove</a>  
</div>​​​​​​ 

JS部分

$(document).ready(function() { 
    var counter = 2; 
    $("#add_emp").click(function() { 
     var newTextBoxDiv = $(document.createElement('div')); 
     newTextBoxDiv.attr("id", 'em' + counter); 

     newTextBoxDiv.html('<br><label>Employee ' + counter + ' </label> <input id=em_name name=em_name type=text required /> <label>Position</label> <input id=em_post name=em_post type=text required /> <label>Monthly Salary</label> <input class=em_sal name=em_sal size=10 type=text required /> &nbsp &nbsp &nbsp <label>Salary Tax</label> <input class=em_tax type=text size=10 required /> '); 

     $("#all_emps div").last().after(newTextBoxDiv); 
     counter++; 
    }); 

    $("#del_emp").click(function() { 
     if (counter == 2) { 
      alert("Can not remove the only employee!"); 
     } else { 
      counter--; 
      $("#em" + counter).remove(); 
     } 
    }); 
    $('#all_emps').on('change', '.em_sal', function() { // Fire the change event 
     var salary = parseInt(this.value); 
     var due_tax= 0; 
     if (salary < 5000) { 
      alert('Salary less than 5000!!'); 
     } else{ 
      due_tax = salary/100; 
      due_tax = salary - due_tax; 
     } 
     // This will get the corresponding tax input for the employee.. 
     $(this).closest('div').find('.em_tax').val(due_tax); 
    }); 
});