Question

我有一个只显示一个表单的页面。这个表格是：

<div style="display: none" class="article_properties">
    <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="addOne" 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-->

当用户单击#addOne div时，将生成该表单的克隆。但是，这种形式在技术上并不是同一种形式，因为它将有一个小细节，使它与众不同。此详细信息是页码。每次单击#addOne div时，页码都会减少一个。在查看当前页面之前，用户选择页码。例如，让我们说用户选择10页。第一个表单的页码是10，当用户点击#addOne div时它是下一个表格，它将是9，依此类推。第一种形式将始终保持在10，第二种形式将始终保持在9，第三种形式将始终保持在8，依此类推。

这是我目前的剧本：

<script>
    var numPages; //Global var: number of pages user wants

    $('#addOne').click(function() {
        $('#pageNumber').text(numPages);
        numPages--;
        var articlePropsTemplate = $('#article_properties_form').clone();
        $('#article_properties_form').append(articlePropsTemplate);
    });
</script>

我目前的代码产生非常奇怪的结果。单击#addOne div时，表单将被复制多次而不是一次，并且逻辑倒计时顺序中的页数未正确显示。 此表单永远不会刷新，所有信息都通过Ajax传递。

这里是jsFiddle：https://jsfiddle.net/9dzgg8m6/6/

Answer 1

改变你的表格：

<div class="article_properties">
    <form id="article_properties_form">
        <div class="form-body">//add a class to wrap the elements for cloning
            <p>Page Number</p><p class="pageNumber"></p>//change the id to class
            <p>Subtitle</p>
            <input type="text">

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

    <div id="addOne" 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-->

和你的js

var numPages = 10; 
$('.pageNumber').text(numPages);//add then number for the first element

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

    numPages--;
    var articlePropsTemplate = $('.form-body:last').clone();//clone the last wrapped elements
    $('#article_properties_form').append(articlePropsTemplate);
    $('.pageNumber:last').text(numPages);//append the number after it was placed on the page
});

https://jsfiddle.net/0738u576/

使用jQuery动态创建克隆的编号表单

1 个答案: