Question

尝试通过移动按钮来回移动用户输入从一个div到另一个div。即使有多个输入，也可以将所选输入从一个输入移动到另一个输入。到目前为止，它将所有输入移动到＆＃34; field1＆＃34;到＆＃34; field2＆＃34;。我试图只来回移动一条线。

尝试了各种各样的东西，还在学习这个。关于我需要注意什么来实现这个目标的任何指针？` 任何帮助表示赞赏。

＆＃13;

var number = [];

function myNotes() {
  var x = document.getElementById("field1");
  number.push(document.getElementById("input").value);
  x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}

function move() {
  $('#field1').appendTo('#field2')
}

＆＃13;

form {
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">

<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>

＆＃13;

JSFIDDLE

Answer 1

你已经混合了javascript和jQuery，这很难理解。我已经使用jQuery创建了一个这样的例子，因为你似乎还是在你的项目中有它：

https://jsfiddle.net/j5mvq6L5/7/

HTML：

<form>
  <input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">

<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>

JS：

//listen for document ready
$(document).ready(function() { 
    //button click listener:
    $("#btnSend").on("click", function(e) {

        var $field1 = $("#field1");  //works like getElementById

        //create a containing div for later
        var $entry = $("<div></div>").addClass("entry");

        //create a new button
        var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");

        //click listener for the new button
        $btnMove.click(function(){              
          //find "sibling" field (I added a class to both), append this button's parent div
          $(this).parents(".field").siblings(".field").append($(this).parent());
        });

        //append entry parts
        $entry.append($("#input").val())
              .append($btnMove);

        //append entry to #field1
        $field1.append($entry);          
    });
 });

CSS：

form {
  display: inline;
}

.btnMove {
  margin-left: .5em;
}

在div之间移动输入

1 个答案: