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

一旦用户选择了页数（在提交第一个表单时），将该值存储在变量中。然后在＆＃39; +＆＃39;单击处理程序，显示该变量的值并每次从中减去一个值。在＆＃39;＃article_properties_form＆＃39;之后提交后，清除输入字段。这可以通过给输入一个id然后使用$（＆＃39;＃whatever＆＃39;）。val（＆＃39;＆＃39;）来完成。

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

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

Answer 2

您必须扩展您的onsubmit页码编号，例如：$（＆＃39;＃pageNumber＆＃39;）。text（$（＆＃39; #numPages选项：selected＆＃39;）。val（））; 更广泛的东西，设置所有表格页面＆＃39; id＆＃34; pagenum＆＃34;值取决于页码的增加或减少。

在增加时，您可以遍历表单页面的容器，例如：for（child in formpagesContainer.children）{//设置id＆＃34; pagenum＆＃34;值

在减少时，您必须确定如何处理多余的页面然后迭代并设置id＆＃34; pagenum＆＃34;值。

您的按钮代码对于新页面仍然可以。

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

2 个答案: