javascript - 如何在 jquery 中将值从一个 div 面板转移到另一个？

Question

在一个Form中，有多个div Panel

<form>
<div class="panel1">
  <input type="text" value="" name="bank0" id="bank0">
  <input type="text" value="" name="shank0" id="shank0">
  <input type="text" value="" name="dhank0" id="dhank0">
  <input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
  <input type="text" value="" name="bank1" id="bank1">
  <input type="text" value="" name="shank1" id="shank1">
  <input type="text" value="" name="dhank1" id="dhank1">
  <input type="text" value="" name="raank1" id="raank1">
</div>
</form>

要求: 如果用户将 panel1 留空并在 panel 2 中输入文本； 然后我们想将所有值从面板 2 转移到面板 1；在最终提交表格时。

在实际用例中，我们有 10 个这样的面板。 fiddle :https://jsfiddle.net/rop5f0d6/

Answer 1

试试这个。

var inputsValue = [];
$("button").click(function () {
    $(".panel2 input").each(function () {
        inputsValue.push(this.value);
    });
    $(".panel1 input").each(function (i, value) {
        $(this).val(inputsValue[i]);
    });
    inputsValue = [];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel1">
    <input type="text" value="" name="bank0" id="bank0">
    <input type="text" value="" name="shank0" id="shank0">
    <input type="text" value="" name="dhank0" id="dhank0">
    <input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
    <input type="text" value="" name="bank1" id="bank1">
    <input type="text" value="" name="shank1" id="shank1">
    <input type="text" value="" name="dhank1" id="dhank1">
    <input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>