折叠和扩展动态克隆的表单

Question

摘要

我的HTML中有一个表单。当用户按下#addOne按钮时，将动态克隆此表单。在用户提交之前验证每个表单。我的验证方法是jQuery插件。每个表单对于页码都是唯一的。例如，第一个表单是第3页，第二个表单是第2页，第三个表单是第1页。每个表单将使用Ajax提交到其唯一的页码。用户成功提交表单后，我希望该特定表单折叠（隐藏），我希望显示.expand div。当用户点击.expand div时，我希望再次显示该特定表单（展开），并希望.expand div折叠（隐藏）。这是我到目前为止所拥有的：JsFiddle

HTML

<div class="article_properties">
                        <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
                        <p style="display: inline">Page Number</p>
                        <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">

                        <p style="display: inline" class="pageNumber"></p>
                        </div>
                        <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
                        <p>Image</p>
                        <input style="padding: 0px" type="file" name="image">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                            <hr style="border: 1px dotted lightgray; margin-bottom: 50px">

                            <div style="display: none" class="expand">
                              <p>
                              Expand Form [Page Number should be here]
                              </p>
                            </div>
                        </form>



                    </div> <!--End of article properties div-->
                <div id="addOne"><p>+Add page</p></div>

的jQuery

$(".article_properties_form").validate({
        errorElement: 'div',
        rules: {
            image: {
                required: true,
                extension: "jpg,jpeg,png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },

        });

var numPages = 3;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);

$('#addOne').click(function()
                    {

                        numPages--;

                        if (numPages == 1)
                        {
                            var articlePropsTemplate = $('.article_properties_form:last').clone();           
                                $('.article_properties').append(articlePropsTemplate);                         
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                 articlePropsTemplate[0].reset();
                                 add_validation_for_forms();

                    articlePropsTemplate.validate().resetForm();
                                $('#addOne').hide();
                        }

                        else
                        {
                                var articlePropsTemplate = $('.article_properties_form:last').clone();
                                $('.article_properties').append(articlePropsTemplate);
                                 articlePropsTemplate[0].reset();
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                add_validation_for_forms();
                                articlePropsTemplate.validate().resetForm();
                        }

                });

                function add_validation_for_forms(){
                $(".article_properties_form").each(function(){
                    $(this).validate({
                        errorElement: 'div',

        rules: {
            image: {
                required: true,
                extension: "jpg|jpeg|png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },
                    });
               });
              }


$('body').on('submit','.article_properties_form', function(e) {
                    e.preventDefault();


                    if ($('.article_properties_form').valid())
                    {
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                                $(this).hide();
                            $(".expand").show();
                        }   
                    });
                   }

                   else
                   {

                   }
                })