Question

我有一个动态表单，其中许多输入具有不同的值，当任何输入被更改时，我希望下一个值向下移动一个位置，以便更改的值变为下一个值，依此类推。

HTML

<form name="top-download-update-edit">
<input name="v1" type="text" value="value1" />
<input name="v2" type="text" value="value2" />
<input name="v3" type="text" value="value3" />
<input name="v4" type="text" value="value4" />
<input name="v5" type="text" value="value5" />
</form>

假设输入v2更改为值6，如

<input name="v2" type="text" value="value6" />

现在我希望接下来所有的值都可以像这样将一个地方移动。

<input name="v1" type="text" value="value1" />
<input name="v2" type="text" value="value6" />
<input name="v3" type="text" value="value2" />
<input name="v4" type="text" value="value3" />
<input name="v5" type="text" value="value4" />

我正在尝试这种方式

$('#nav').on('change', 'form[name=update] input', function(){
    var input = $(this).val();
    $(this).next('input').val(input);
    //and some thing here to shift all next values one place.
});

这没有任何作用。请参阅并建议任何可行的方法。

感谢。

更新

我的实际代码。

update.php

<div id="update">

<form name="update" action="update-edit.php" method="post">

  <?php $i=1; while($row = mysqli_fetch_assoc($result)):?>
  <label><?php echo $i.'. ' ?><input name="v<?php echo $i; ?>" type="text" value="<?php  echo $row['title'] ?>" /></label>
  <?php $i++; endwhile;?>

  <input type="submit" value="Submit" id="submit" />
</form>

</div>

jquery的

$.post('../update.php',{value:value},function(data){
    $('#center-container').html(data);

    var v1 = $('input[name=v1]').val();
    var v2 = $('input[name=v2]').val();
    var v3 = $('input[name=v3]').val();
    var v4 = $('input[name=v4]').val();
    var v5 = $('input[name=v5]').val();
    var v6 = $('input[name=v6]').val();

    $("form[name=update]").data("values", {"v1": v1, "v2": v1, "v3": v3, "v4": v4, "v5": v5, "v6": v6});

    $('form[name=update] input').change(function(){
        var form = $(this).parent().parent();
        var name = $(this).attr('name');
        form.find('input').each(function() {
            var thisName = $(this).attr('name');
            var prevName = $(this).parent().prev('label').children('input').attr('name');
            if($(this).attr('name') > name){
                $(this).val(form.data('values')[prevName]);
            }
        });
        form.find('input').each(function() {
            form.data('values')[$(this).attr('name')] = $(this).val();
        });
    });     


});

Answer 1

好的，我会做这样的事情：因为在.change()函数中你无法知道input的先前值，你需要在某处存储当前值以便转移所有内容。您可以使用.data()功能。

$("form[name=update]").data("values", {"v1": "value1", "v2": "value2", "v3": "value3", "v4": "value4", "v5": "value5"});
$("form[name=update] input").change(function(){
    var form = $(this).parent();
    var name = $(this).attr("name");
    form.find("[name="+name+"] ~ input").each(function() {
        var thisName = $(this).attr("name");
        var prevName = $(this).prev("input").attr("name");
        $(this).val(form.data("values")[prevName]);
    });
    form.find("input").each(function() {
        form.data("values")[$(this).attr("name")] = $(this).val();
    });
});

这基本上意味着每次更改输入值时，您都会找到所有下一个输入“兄弟姐妹”（即~ css选择器）并将其值替换为您存储的旧值。在此之后，当然，您更新存储的数据。顺便说一下，使用id而不是名称属性来识别元素可能会更容易。

您可以找到working fiddle here。

更改/推送一个位置接下来所有输入值onchange当前输入值

1 个答案: