追加/删除/替换

Question

我不确定这是否是编写此代码的最佳方式，但我的几乎有效...

这就是我想要做的：

(1) 移动

元素在单击时移动到另一个 div

(2) 通过附加或删除

来更新隐藏的输入字段

注意：我不知道不想替换隐藏输入字段中的值，而是添加到其中，这样您就可以得到“u40,u56,u98”的值......等等......

所以，当用户单击具有 addable 类的

元素，它会从其父

中删除，并附加到
中另一个分区。此外，隐藏的输入字段将使用
• 元素的 id 进行更新。相反，如果用户单击具有可移动类的
• 元素，则会发生相反的情况...
• 将从其父元素中删除 < code>
  并附加到另一个，隐藏的输入字段通过删除
  • 元素的 id 进行更新...

这就是我所拥有的远...添加它时它可以工作，但是当您单击 li.removable 元素时，隐藏的输入字段不会删除该值。

$('li').click(function() {
    var uID = $(this).attr('id')+',';

    if($(this).hasClass("addable")) {

      $("input#edit-r").val($("input#edit-r").val() + uID);
      $(this).removeClass("addable");
      $(this).addClass("removable");
      $(this).appendTo($("#selections ul"));

    } else {
        var currentValue = $("input#edit-r").val();
        currentValue.replace(uID,"");
        $("input#edit-r").val(currentValue);
        $(this).removeClass("removable");
        $(this).addClass("addable");
        $(this).appendTo($(".filtered ul"));

    }
});

<div class="filtered">
    <ul>
        <li id="u40" class="addable">U40</li>
        <li id="u56" class="addable">U56</li>
        <li id="u98" class="addable">U98</li>   
    </ul>
</div>

<div id="selections">
    <ul>
    </ul>
</div>

<input type="hidden" id="edit-r" value="" />

Answer 1

更改

currentValue.replace(uID,"");

为

currentValue = currentValue.replace(uID,"");

另外为了优化您的代码，您可以使用 jquery 对象可链接性。

$(this).removeClass("addable").addClass("removable").appendTo("#selections ul");

Answer 2

与其在每次做出选择时尝试更新隐藏输入，为什么不让 onsubmit 处理程序为您处理这项工作呢？

<form onsubmit="GetSelectedListIds()">

并且：

function GetSelectedListIds() {
  var ids = [];
  $("li", "#selections").each(function() {
    ids[ids.length] = $(this).attr("id");
  });
  $("input#edit-r").val(ids.join());
}

通过这种方式，您不必担心隐藏元素与所选项目保持同步。