Javascript 更改当前输入值时，更改/按下所有输入值旁边的一个位置

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

Html

这没用。 请查看并建议任何可能的方法

谢谢

更新

我的实际代码

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>

---

好的，我会这样做：因为在

.change（）

函数中，您无法知道

输入

的先前值，所以您需要将当前值存储在某个位置，以便移动所有内容。您可以使用

.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

s而不是name属性来标识元素可能会更容易

---

你可以找到一个答案。

我不确定我是否理解你想要实现的目标。如果“v2”更改为“v3”，会发生什么情况？有字母顺序吗？@Aioros没有字母顺序，

如果v2=v3，那么v3=v2，v4=v3等等，只需将值推一位即可。非常感谢您在示例中使用它，但我对它进行了一些修改，请查看更新并建议这是否是正确的方法。我想它不起作用是因为不同的标记结构（基本上是标签标记），这会弄乱“兄弟”CSS选择器和.prev（）函数。我真想知道你是怎么修好的：）嗯，是的，没关系。唯一的缺点是按字母顺序比较名称属性以确定哪一个先到。如果您碰巧有不同类型的名称，这可能是不可能的（在这种情况下，您可以循环输入，在找到更改的名称之前什么也不做，然后根据需要的说明从那里开始另一个循环）。谢谢，我让它工作，因为名称有数字值进行比较。你们在吗？我需要问一个问题。
<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.
});

<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>

$.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();
        });
    });     


});

$("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();
    });
});