0

我不确定这是否是编写此代码的最佳方式，但我所拥有的几乎可以工作......

这就是我想要做的：

(1)<li></li>点击时将元素移动到另一个div

(2) 通过添加或删除隐藏的输入字段来更新<li id>

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

因此，当用户单击<li>具有 addable 类的元素时，它会从其父级中删除<ul>并附加到<ul>另一个 div 中。此外，隐藏的输入字段将使用<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="" />
4

2 回答 2

1

改变

currentValue.replace(uID,"");

到

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

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

$(this).removeClass("addable").addClass("removable").appendTo("#selections ul");
于 2011-04-30T18:19:22.473 回答
1

与其在每次进行选择时都尝试更新隐藏的输入，不如让 onsubmit 处理程序为您处理这项工作？

<form onsubmit="GetSelectedListIds()">

和：

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

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

于 2011-04-30T18:40:29.367 回答