Question

我正在尝试使用php＆amp;创建动态文本框jQuery的。我想提交一份文件进行演示，每个演示文稿都有多个作者，每个作者都有多个隶属关系。我试图为作者及其隶属关系创建动态文本框。我可以动态创建作者最多10个，但仅限第一作者的附属关系。有人请帮我纠正这段代码。感谢

<html>
<head>
<title>author</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<style type="text/css">
	div{
		padding:8px;
	}
</style>
 
</head>
 
<body>
 
<h1>Author</h1>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    var counter = 2;
 
    $("#addAuthor").click(function () {
 
	if(counter>10){
            alert("Only 10 authores allow");
            return false;
	}   //addAffiliation
 
	var newauthorDiv = $(document.createElement('div')) 
	     .attr("id", 'authorDiv' + counter);
 
	newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
		'<br><label>Name : </label>' +
	      '<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
		  '<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
	      '<input type="text" name="author' + counter + 'affiliation' +  counter +
	      '" id="author' + counter + 'affiliation' +  counter +'" value="" >' + 
		  '<input type="button" id="addAffiliation" value="+" >' +
		  '<input type="button" id="removeAffiliation" value="-" >' + '</div>');
 
	newauthorDiv.appendTo("#AuthorGroup");
 
 
	counter++;
     });
 
     $("#removeAuthor").click(function () {
	if(counter==1){
          alert("No more author to remove");
          return false;
       }   
 
	counter--;
 
        $("#authorDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
	var msg = '';
	for(i=1; i<counter; i++){
   	  msg += "\n Author " + i + " : " + $('#author' + i).val();
	}
    	  alert(msg);
     });
  });
  
  
  // Affiliation 
  
  $(document).ready(function(){
 
    var counter = 2;
 
    $("#addAffiliation").click(function () {
 
	if(counter>10){
            alert("Only 10 Affiliations allow");
            return false;
	}   
 
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
 
	newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
	      '<input type="text" name="author1_affiliation' + counter + 
	      '" id="author1_affiliation' + counter + '" value="" >');
 
	newTextBoxDiv.appendTo("#AffiliationGroup");
 
 
	counter++;
     });
 
     $("#removeAffiliation").click(function () {
	if(counter==1){
          alert("No more Affiliations to remove");
          return false;
       }   
 
	counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
	var msg = '';
	for(i=1; i<counter; i++){
   	  msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
	}
    	  alert(msg);
     });
  });
  
</script>
</head><body>
 
<div id='AuthorGroup'>

		<label><b>Author 1 </b></label> <br>
        <label>Name : </label><input type='author' id='author1_name1' >
       
        <div id='AffiliationGroup'>
		 <label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' > 
        <input type='button' value='+' id='addAffiliation'>
        <input type='button' value='-' id='removeAffiliation'>
        <!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
		</div>    
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
 
</body>
</html>

Answer 1

请参阅http://jsfiddle.net/9y3n33jx/

我还没有完成整件事，但它应该给你一个想法。

您需要将原作者放在div.authorDiv内。使用类名而不是id作为+ - 按钮。

    <input type='button' value='+' class='addAffiliation'>
    <input type='button' value='-' class='removeAffiliation'>

因为这些按钮会动态添加，您需要绑定到body上的按钮类的点击事件：

$('body').on("click", ".addAffiliation", function () {

（单击按钮时，您需要按类别计算div内的分支机构数量，即$（this）.parent（）。（＆＃34; .affiliateClass＆＃34;）。length）

单击添加按钮时，您需要将新div添加到单击按钮的父级：

newTextBoxDiv.appendTo($(this).closest(".authorDiv"));

你必须为 - 按钮做同样的事情。这应该让你进入正确的方向。

按钮onclick＆amp;创建动态文本框。将数据保存到数据库

1 个答案: