javascript - 根据用户输入创建编号表单

Question

我有一个从不刷新的页面，服务器方面的所有内容都使用 Ajax 进行中继。有一个表单要求用户提供信息，然后询问他们想要多少页。页数从2-15不等。用户完成后，他们单击以转到下一部分(不刷新)。下一部分是用户可以创建页面的地方。将显示一个表单并要求用户输入副标题和文本。假设用户需要 10 页。此表单将标记为第 10 页。当用户填写此信息时，他们将单击显示下一个表单(第 9 页)的“+”按钮，用户输入数据，然后单击“+”按钮再次显示表格编号 3(第 8 页)等。我如何才能使显示的每个表单对于该页码都是唯一的？另外，我该怎么做，如果用户单击后退按钮将页数更改为 11，则下一页上的数字会相应更改(即:第一个表单将是第 11 页，第二个表单将是第10 等)。

这是我的第一部分代码:

HTML

<form class="article_information_form" action="" method="POST">

                            <p>Number of pages</p>
                            <select id="numPages" name="numPages">
                                <option value="" selected></option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                            </select><br>
                             <input id="btn" type="submit" name="article_info_btn" value="Submit">
                        </form>
                    </div> <!--End of article information div-->

jQuery

$('.article_information_form').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                            $(".article_Information").fadeOut("slow");
                            $(".article_properties").fadeIn("5000");
                            $('#pageNumber').text($('#numPages option:selected').val());
                        }
                    });
                })

第二部分

HTML

<form id="article_properties_form">
                        <p>Page Number</p><p id="pageNumber"></p>
                            <p>Subtitle</p>
                            <input type="text">

                            <p>Text</p>
                            <textarea></textarea>
                            <input type="submit" value="Submit/Update">
                        </form>

                        <div id="button" style="width: 25px; height: 25px; background-color: orange; border-radius: 50%"><p style="text-align: center; line-height: 25px">+</p></div>
                    </div> <!--End of article properties div-->

jQuery

$('#button').click(function()
            {
                $('#pageNumber').text($('#numPages option:selected').val() - 1);
            });

我应该怎么做，以便当用户单击“+”按钮时，创建一个具有逻辑排序页码的表单？即:第一个表格第 10 页，第二个表格第 9 页等，这些数字应根据对总页数所做的任何更改进行调整。

Answer 1

一旦用户选择了页数(在提交第一个表单时)，将该值存储在一个变量中。然后在“+”单击处理程序中，显示该变量的值并每次从中减去一个。提交“#article_properties_form”后，清除输入字段。这可以通过给输入一个 id 然后使用 $('#whatever').val('').

如果用户想要更新页数，您需要第二个变量来保存所需的原始页数。这样，一旦他们去更新他们想要的数字，您就可以获取新数字与原始数字之间的差异，然后添加或减去页面以更新第一个变量，该变量保存剩余页数。

这有意义吗？您需要在第一个“提交”处理程序中使用逻辑来检查它是否是第一次提交，这样您就知道是否要进行我第二段中提到的比较业务。