javascript - 每 3 秒递增随机数并显示结果

Question

我有从 jquery 函数生成的动态输入字段。可以通过单击这些输入字段的按钮来添加或删除。我有一个随机数生成器，每 3 秒更改一次它的值。我试图将随机数的值设置为第一个动态输入字段，然后当我在表单中添加其他输入字段时，将值增加 +1 。

我怎样才能实现以下目标？因为，值每 5 秒更改一次。生成随机数后，更新表单中当前动态输入字段的值。增量将始终为 +1 但随机数将明显不同。 JSFIDDLE或 LIVE_VERSION

<script>
$(document).ready(function () {
     //generate random number
      setInterval(function() {
      var number = 1 + Math.floor(Math.random() * 6);
      $('#increment_num').text(number);
    },
    3000);

    $('#btnAdd').click(function () {
        var num = $('.clonedSection').length;
        var newNum = new Number(num + 1);
        var nextAutoIncrement = $('#result').val();

        var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);
        newSection.children(':first').children(':first').attr('id', 'increment_id_' + newNum).attr('name', 'increment_id_' + newNum);
        newSection.insertAfter('#pq_entry_' + num).last();

        event.preventDefault();
        $('#btnDel').prop('disabled', '');

        if (newNum == 5) $('#btnAdd').prop('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedSection').length; // how many duplicate input fields we currently have
        $('#pq_entry_' + num).remove(); // remove the last element

        // enable the "add" button
        $('#btnAdd').prop('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
    });

    $('#btnDel').prop('disabled', 'disabled');
});
</script>

html

<form>
Number to start increment from:
<input id="increment_num" name="increment_num" placeholder="" type="text" /></br>
Values:
<ul id="pq_entry_1" class="clonedSection">
            <li>
                <input id="increment_id_1" name="increment_id_1" placeholder="" type="text" />
            </li>
</ul><br/>
<input type='button' id='btnAdd' value='add text box' />
<input type='button' id='btnDel' value='Delete' /></br>
</form> 

目标

Answer 1

这是我的一小部分更改:http://jsfiddle.net/f9XP8/1/

为了更容易修复，您应该在数字更改时更新所有值:

success: function (data) {
        var $cloned = $('.clonedSection li');
        var num = parseInt(data);
        $increment_num.val(num);
        $cloned.each(function(i){
            $(this).find('input').val(num+i);
        })
},

您还可以大量清理克隆代码并确保新元素设置了正确的值:

$('#btnAdd').click(function () {
    var $clones = $('.clonedSection li'),
        num = $clones.size() + 1,
        next_num = parseInt($clones.last().find('input').val())+1,
        $template = $clones.first(),
        newSection = $template.clone().attr('id', 'pq_entry_'+num),
        ident = 'incremend_id_'+num;

    newSection.find('input').attr({
        'id': ident,
        'name': ident
    }).val(next_num);

    $('.clonedSection').append(newSection);

    if (num == 5) $('#btnAdd').prop('disabled', 'disabled');
});