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>

目标

enter image description here

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');
});

Answer 2

    $('#increment_num').val(1 + Math.floor(Math.random() * 6));
    setVal(parseFloat($('#increment_num').val())+1)

    setInterval(function () {
        var number = 1 + Math.floor(Math.random() * 6);
        $('#increment_num').val(number);
        var i=number+1;
        setVal(i);
    },
    5000);

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

     //..old code as it is

     //at last add

     setVal(parseFloat($('#increment_num').val())+1)
    })

    //rest of the code as it is

    // add at end                              
    function setVal(i)      
    {
        $('.clonedSection').each(function () {
            $(this).find('input').val(i);
            i++;
        })
    }

DEMO

每3秒增加随机数和显示结果

2 个答案: