【发布时间】：2015-12-15 08:41:59
【问题描述】：
我想用 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>
【问题讨论】：
-
你的问题很混乱。能否请您对其进行编辑并使其易于理解。
-
@A.J 我添加了更多信息，我不知道这是否足以解释它。
标签： javascript jquery