jQuery 剪切输入字段遗漏文本

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

您正在对输入值进行硬编码。尝试在获得 html 之前保存这些值，并在 append/prepend

之后将其分配回来

Answer 2

只需四处移动元素！

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

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

$("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>

jQuery 剪切输入字段遗漏文本

jQuery Cut input field misses text

javascript

jquery

swap

dom

function