Question

在表单中，有多个div面板

<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留空并将文本输入到面板2; 那么我们想要将所有值从面板2转移到面板1;在最终提交表格时。

在实际使用案例中，我们有10个这样的面板。小提琴：https://jsfiddle.net/rop5f0d6/

Answer 1

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果第一个面板留空（我从要求中读取的内容），这只会将数据从面板2移动到面板1。

它还会擦除面板2数据，以防止发布重复的表单数据。从你的问题我认为这是你的目标？

以下是如何在jQuery中实现此功能：

$("button").click(function(){
  var moveData = true, formvalues = [];

  $(".panel1 input").each(function(e, field){
    if( field.value != '' ){
      moveData = false;
      return false;
    }
  });

  // only move data if first panel is blank
  if( moveData ){
    $(".panel2 input").each(function(){
      formvalues.push( this.value );
      this.value = '';
    });
    
    $(".panel1 input").each(function (i) {
      this.value = formvalues[i];
    });
  }
});

<script src="https://code.jquery.com/jquery-2.1.4.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>

我还在vanilla JS中编写了解决方案供您参考（可能有用），因为普通的JS在性能方面更有效。

var submitBtn = document.getElementsByTagName("button")[0];
submitBtn.addEventListener("click", function(){
  var moveData = true,
      formvalues = [],
      panel1 = document.getElementsByClassName("panel1"),
      panel1Fields = panel1[0].getElementsByTagName("input"),
      panel2 = document.getElementsByClassName("panel2"),
      panel2Fields = panel2[0].getElementsByTagName("input");

  for(var i=0; i < panel1Fields.length; i++){
    if( panel1Fields[i].value != '' ){
      moveData = false;
      return false;
    }
  }

  // only move data if first panel is blank
  if( moveData ){
    for(var i=0; i < panel2Fields.length; i++){
      formvalues.push( panel2Fields[i].value );
      panel2Fields[i].value = '';
    }

    for(var i=0; i < panel1Fields.length; i++){
      panel1Fields[i].value = formvalues[i];
    }
  }
});

<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>
<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>
<button>Send</button>

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

2 个答案: