如何通过JQuery更改/更改变量名称以保持名称属性不同来添加/删除文本框？
[英]How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?
问题描述
我想使用JQuery制作书籍目录，以将书籍添加到作者。 在我所拥有的代码中，我试图添加一位作者，并让他的书仅与他的号码一起排列在数组中。 与其他作者和自己的书籍分开存放。
例如，当我按下添加作者的按钮时，会出现一个输入框，这样我就可以添加作者的名字，还有一个添加书籍的按钮，当我按下该按钮时，我会得到一个输入框来添加一个书名。
当我再次按下添加作者时，我希望能够使用与以前相同的输入框添加另一个作者（向该作者添加更多书籍）。
还可以添加分配给该作者的多本书。
我已经在图片中做到了，但是我得到了很多。 我希望它被作者分开。
author1的数组为{book1，book2，book3 ...}
author2具有一组{book13，book14，book15}
（我是JQuery的初学者）
这是我到目前为止的代码：
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
3 个解决方案
解决方案1
2 已采纳 2015-12-15 09:27:53
更新了代码（修复了一些错误。），请尝试此。
<!DOCTYPE html> <html> <head> <title>Add or Remove text boxes with jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> <!-- #main { max-width: 800px; margin: 0 auto; } --> </style> </head> <body> <div id="main"> <h1>Add or Remove text boxes with jQuery</h1> <div class="my-form"> <button onclick="addAuthor()" >Add Author</button><br><br> <div id="addAuth"></div> <br><br> <button onclick="submit()" >Submit</button> </div> <div id="result" ></div> </div> <script type="text/javascript"> var authors = 0; function addAuthor(){ authors++; var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />' +'<button onclick="addMore(\\'auth'+authors+'\\')" >Add Book</button>' +'</div>'; $("#addAuth").append(str); } var count=0; function addMore(id){ count++; var str = '<div id="bookDiv'+count+'">' +'<input class="'+id+'" type="text" name="book'+id+'" />' +'<span onclick="addMore(\\''+id+'\\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>' +'<span onclick="removeDiv(\\'bookDiv'+count+'\\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>' +'</div>'; $("#"+id).append(str); } function removeDiv(id){ var val = confirm("Are you sure ..?"); if(val){ $("#"+id).slideUp(function(){$("#"+id).remove();}); } } function submit(){ var arr = []; for(i=1; i<=authors; i++){ var obj = {}; obj.name = $("#author"+i).val(); obj.books = []; $(".auth"+i).each(function(){ var data = $(this).val(); obj.books.push(data); }); arr.push(obj); } $("#result").html(JSON.stringify(arr)); } </script> </body> </html>
解决方案2
0 2015-12-15 08:56:59
请尝试以下代码，并包括jquery min js：
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> <a href="javascript:void(0)" onclick="$(this).parent().remove();">Remove</a></div>');
} </script>
解决方案3
0 2015-12-15 09:13:07
你可以试试这个。
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>
如何在Javascript中创建变量，并在变量名称中添加一个不断变化的数字？
[英]How do I create a variable in Javascript, and add a changing number to the variable's name?
如何删除现有的类名并添加一个带有jQuery和cookie的新名称？
[英]How do I remove an existing class name and add a new one with jQuery and cookies?
如何删除选择的名称，并使用javascript或jquery在textarea上添加名称？
[英]How can I remove name on the select and add the name on the textarea with javascript or jquery?
当所有 select 框都有一个名称时，我如何从 DOM 添加/删除 select 框，以便在提交时我从活动的 select 框中获取值？
[英]How can I add/remove select boxes from DOM when all select boxes have one name so that upon Submit I get value from active select box?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用jquery添加2个文本框？
如何在Javascript中创建变量，并在变量名称中添加一个不断变化的数字？
如何使用更改变量名称添加固定变量名称
如何删除现有的类名并添加一个带有jQuery和cookie的新名称？
使用javascript和jQuery更改变量名称
如何删除选择的名称，并使用javascript或jquery在textarea上添加名称？
当所有 select 框都有一个名称时，我如何从 DOM 添加/删除 select 框，以便在提交时我从活动的 select 框中获取值？
Jquery 选择按名称或 ID 删除属性
如何使用变量引用文本框
如何使用Javascript将文本框和按钮添加到表中？
相关标签