Javascript 如何在JQuery更改变量名以保持名称属性不同的情况下添加/删除文本框？_Javascript_Jquery

Javascript 如何在JQuery更改变量名以保持名称属性不同的情况下添加/删除文本框？

javascript jquery

Javascript 如何在JQuery更改变量名以保持名称属性不同的情况下添加/删除文本框？,javascript,jquery,Javascript,Jquery,我想用JQuery创建一个图书目录，以便向作者添加图书。在我所拥有的代码中，我试图添加一个作者，并让他的书仅与他的编号组成一个数组。由其他作者和他们自己的书籍阵列分开例如，当我按下按钮添加作者时，会出现一个输入框，这样我就可以添加作者姓名，还可以添加一个按钮来添加一本书，当我按下该按钮时，会出现一个输入框来添加一本书的名称当我再次按下add author（添加作者）按钮时，我希望能够使用与以前相同的输入框添加其他作者（向该作者添加更多书籍）还可以添加分配给该作者的多本书我已经在图片

我想用JQuery创建一个图书目录，以便向作者添加图书。在我所拥有的代码中，我试图添加一个作者，并让他的书仅与他的编号组成一个数组。由其他作者和他们自己的书籍阵列分开

例如，当我按下按钮添加作者时，会出现一个输入框，这样我就可以添加作者姓名，还可以添加一个按钮来添加一本书，当我按下该按钮时，会出现一个输入框来添加一本书的名称

当我再次按下add author（添加作者）按钮时，我希望能够使用与以前相同的输入框添加其他作者（向该作者添加更多书籍）

还可以添加分配给该作者的多本书

我已经在图片中做过了，但是我得到了一系列的东西。我希望它被作者分开

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>


使用jQuery添加或删除文本框
使用jQuery添加或删除文本框

添加作者
作者1




添加书本


$（文档）.ready（函数（$）{
var wrapper=$（“.all_字段”）；//字段包装器
var commonPart=$（“#commonPart”）；
var add_author=$（“.add_author”）；//添加按钮ID
var add_subButton=$（“.add_book”）；//添加子按钮ID
$（'.my form.add box'）。单击（函数（）{
变量n=$（'.all_字段'）。长度+1；
if（15
Add book'）；
htmlToAdd.hide（）；
$（'.my form p.all_fields:last'）。在（htmlToAdd）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（添加书籍）。单击（功能（e）{
e、 预防默认值（）；
var htmlToAdd=$（''）；
htmlToAdd.hide（）；
$（'.my form p.all_fields:last'）。在（htmlToAdd）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.my form'）。在（'单击'，'.remove box'，函数（）上{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
});

请尝试此代码并包括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>



作者


书
添加更多


函数AddCustomMOre（）{
$（“.all_字段”）.append（'Author
book'）；
}

你可以试试这个

<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>


添加作者
作者1




添加书本

var c=1；
$（“.add_author”）。在（“单击”，函数（）{
C++；
$（“.all_字段”）.append（'Author'+c+'

Add book'）；
});
$（“.add_book”）。在（“单击”，函数（）{
var id=$（this.attr（“div id”）；
$（“#图书”+id）。附加（“”）；
});

更新的代码（修复了一些错误…），请尝试此

<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>


使用jQuery添加或删除文本框
使用jQuery添加或删除文本框
添加作者





提交
var=0；
函数addAuthor（）{
作者++；
var str=''
+“添加书本”
+'';
$（“#addAuth”）.append（str）；
}
var计数=0；
函数addMore（id）{
计数++；
var str=''
+''
+'+'
+'-'
+'';
$（“#”+id）.append（str）；
}
函数removeDiv（id）{
var val=确认（“您确定吗？”）；
if（val）{
$（“#”+id）.slideUp（函数（）{$（“#”+id.remove（）；}）；
}
}
函数提交（）{
var-arr=[]；
对于（i=1；i）您的问题非常令人困惑。请您编辑它并使其易懂。@A.J我添加了更多信息，我不知道这是否足以解释它。我如何保持书名与作者的编号相同，以便该书与该作者相关？您不需要这样做。您可以通过选择$（#books'+author number+'input'）。每个（函数（）{alert（this.value）；}）如何在其书籍author1{book1，book2，book3}author2{book4，book5}author3{book6，book7，book8}中添加更多作者
我应该如何将数据arr发送到数据库？@develi我一直在尝试将数组传递到mysql数据库，但我似乎不知道这是怎么做到的。我尝试了ajax，.click（），通过post发送，但我不断收到错误。在没有看到您的代码的情况下，我如何才能说出您的错误，发布您的代码[您如何发送数据。]添加了一个函数sentToServer，通过ajax函数sentToServer（data）{$.ajax（{type:“POST”，data:{arr:JSON.stringify（data）}，url:“next.php”，success:function（data）发送数据