jQuery Cut 输入字段缺少文本

Question

我想移动的表单元素有问题。这是我的简单示例。有两个链接可以向上或向下移动容器。

<div class="unique_a unique_a_1" data-attr="unique_a_1">
  <a href="move('unique_a', 'up', 1)">Up</a>
  <a href="move('unique_a', 'down', 1)">Down</a>
  <input value="aaa">
</div>

<div class="unique_b unique_b_2" data-attr="unique_b_2">
  <a href="move('unique_b', 'up', 2)">Up</a>
  <a href="move('unique_b', 'down', 2)">Down</a>
  <input value="bbb">
</div>

问题发生了，当我单击其中一个字段时，更改输入字段的值并尝试更改我的

function move( div, direction, counter )
{
  if( direction == 'up' ) {
    var field = $("."+ div +"_"+ counter).prev().attr("data-attr");
  } else {
    var field = $("."+ div +"_"+ counter).next().attr("data-attr");
  }

  if( field != undefined )
  {
    // Clicked element
    var current = $("."+ div +"_"+ counter).html();

    // <div> to change position with
    var other = $("."+ field).html();

    // Empty destination <div> and put in code of clicked element
    $("."+ field).empty().prepend(current);

    // Empty clicked element
    $("."+ div +"_"+ counter).empty().append(other);
  }

我遇到了问题，如果我在第一个输入字段中写入“ggg”并将其向下移动，它会丢失“ggg”并显示“aaa”。

如何将文本放入字段，然后对元素进行排序并保留我写的文本？

Answer 1

只需移动元素！

另外 - 你正在用所有这些唯一标识符射击自己，并跟踪它们。你不需要任何东西。例如，当单击事件发生时 - 浏览器通过设置 this 的值来告诉您在处理程序中单击了哪个内容。我利用它来获取我们想要移动的 div。

一次分配处理程序（作为委托处理程序）允许您动态添加越来越多的“.movable”，而不必担心分别为每个处理程序分配一个处理程序。

$("body").on("click", ".movable .move-up", function (e) {
  e.preventDefault();
  // get the div that surrounds the button that was clicked
  var thisDiv = $(this).closest(".movable");
  // see if there is a previous div, if so move thisDiv to before it.
  var p = thisDiv.prev('.movable');
  if (p.length > 0) {
    p.before(thisDiv);
  }
});

$("body").on("click", ".movable .move-down", function (e) {
  e.preventDefault();
  var thisDiv = $(this).closest(".movable");
  var n = thisDiv.next('.movable');
  if (n.length > 0) {
    n.after(thisDiv);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="aaa">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="bbb">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="ccc">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="ddd">
</div>

Answer 2

您正在硬编码输入的值。尝试在获取 html 之前保存值并在附加/前置后将其分配回