Question

我不确定这是否是编写此代码的最佳方式，但我几乎的工作原理......

这就是我要做的事情：

（1）单击时将<li></li>元素移动到另一个div

（2）通过附加或删除<li id>

来更新隐藏的输入字段

注意：我不想替换隐藏输入字段中的值，而是添加它，以便最终可以使用值“u40，u56，u98”...等等... < / p>

因此，当用户点击具有可添加类的<li>元素时，它会从其父<ul>中删除，并附加到另一个div中的<ul>。此外，隐藏的输入字段将使用<li>元素的id进行更新。相反，如果用户点击带有可移除类的<li>元素，则会发生相反的情况...... <li>已从其父<ul>中删除并附加到另一个，并且隐藏的输入字段通过删除<li>元素的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());
}

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

追加/删除/替换

2 个答案: