推广用于多个表单的jQuery动态添加/删除表单输入

目前，我有一个function代码，用于在我的页面上动态添加和删除表单输入。 我有多个表单需要包含在页面上，所以我做了一个事件操作，他们可以按下按钮，它会隐藏除相关表单之外的所有表单。 这工作正常，但它与我的jQuery / javascript代码产生冲突，因为代码使用类名来动态添加或删除输入字段。 两种forms都必须在同一个类名下才能使用jQuery函数，但是这会产生冲突并且函数停止工作。 我可以写两个版本的函数（每个类一个），但我试图找到一种方法来概括它，所以我不必有这么多的函数。 我在考虑做这样的事情：

$('.ccinput').addClass('dinput').removeClass('ccinput'); 

我会相应地更改每个表单的类名，以便它们是唯一与jQuery函数通信的人。 这种方法似乎非常容易出错，特别是有两种以上的forms（我计划总共有4种forms）。 你们知道我能做到的另一种方式吗？ 这是我的html代码供参考：

编辑：我已经对代码进行了重大更改，所以这是新版本。 我从表单输入中删除了所有ID值，并更改了jQuery函数，以便它不使用ID值作为选择器。 这消除了一些冲突。 我现在正在尝试使用attr（’class’，’newclass’），以便jQuery函数适用于这两个代码。 它似乎完美地适用于第一种forms，但它拒绝为第二种forms起作用。 我不知道为什么。

       $(document).ready(function() { $("#table1").hide(); $("#table2").hide(); $("#cc_button").click(function(){ $("#table1").show(); $("#table2").hide(); $("#cctable tr").attr('class', 'dinput'); $("#dbtable tr").attr('class', 'dbinput'); }); $("#db_button").click(function(){ $("#table2").show(); $("#table1").hide(); $("#dbtable tr").attr('class', 'dinput'); $("#cctable tr").attr('class', 'ccinput'); }); $('#btnAdd').click(function() { var num = $('.dinput').length; // how many "duplicatable" input fields we currently have var newNum = new Number(num + 1); // the numeric ID of the new input field being added // create the new element via clone(), and manipulate it's ID using newNum value var newElem = $('.dinput:last').clone(); // insert the new element after the last "duplicatable" input field $('.dinput:last').after(newElem); $(".dinput:last td:first").replaceWith( "" + newNum + "" ); // enable the "remove" button $('#btnDel').attr('disabled',''); $(".date").mask("99/99/9999"); // business rule: you can only add 20 names if (newNum == 20) $('#btnAdd').attr('disabled','disabled'); }); $('#btnDel').click(function() { var num = $('.dinput').length; // how many "duplicatable" input fields we currently have $('.dinput:last').remove(); // remove the last element // enable the "add" button $('#btnAdd').attr('disabled',''); // if only one element remains, disable the "remove" button if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); }); $(".date").mask("99/99/9999"); });    
 CC DB 
 
 <form id="ccards" method="post" action=""> 
 
 
 
# (last four digits)
 
Amount
 
Approval
 
Date Received
 
 
 
 
 1 
 
  
 
  
 
  
 
  
 
 
 
 
   
   
 
 <form id="db" method="post" action=""> 
 
 
 
DB #
 
Amount
 
Date
 
 
 
 
 1 
 
  
 
  
 
  
 
 
 
 
   
   
   

Answer 1

好的，我解决了。 我必须修复我的选择器有多个问题，但在此之后，以下解决方案完美地运行：

 $("#cc_button").click(function(){ $("#table1").show(); $("#table2").hide(); $("#cctable tr").attr('class', 'dinput'); $("#dbtable tr").attr('class', 'dbinput'); }); $("#db_button").click(function(){ $("#table2").show(); $("#table1").hide(); $("#dbtable tr").attr('class', 'dinput'); $("#cctable tr").attr('class', 'ccinput'); }); 

这基本上根据按下哪个按钮改变每个表的class属性。 从理论上讲，这应该适用于4种forms，但我还没有尝试过。 对于那些想看我做了什么的人来说，这是更新后的代码（自第一个代码以来我已经改变了很多）：

         
 CC DB 
 
 
 
 
 
 
# (last four digits)
 
Amount
 
Approval
 
Date Received
 
 
 
 
 1 
 
  
 
  
 
  
 
  
 
 
 
 
   
  
 
 
 
 
 
 
 
DB #
 
Amount
 
Date
 
 
 
 
 1 
 
  
 
  
 
  
 
 
 
 
   
  
 
   

Answer 2

你可以使用这样的东西。

 //when the Add Field button is clicked $("#add").click(function (e) { //Append a new row of code to the "#items" div $("#items").append('
Delete
'); }); 

详细教程http://voidtricks.com/jquery-add-remove-input-fields/