我不知道這是否是編寫這些代碼的最優化的方式,但我有什麼幾乎作品...添加/刪除/更換
這就是我想要做的事:
(1)移動<li></li>
元件到另一個DIV點擊時
(2)由任一追加更新一個隱藏的輸入字段或取出<li id>
注:我不想更換噸他在隱藏的輸入字段值,但添加到它,以便您可以結束「u40,u56,u98」...等值...
因此,當用戶點擊<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="" />
只是一個側面說明。用你的答案提供一個jsfiddle鏈接,人們可以真正地測試發生了什麼。 – 2011-04-30 18:05:38
你是對的......我總是忘記那個......對不起......但是,我*確實知道了! – WonderBugger 2011-04-30 18:15:35
請不要在問題標題中寫標籤。 – 2011-04-30 18:17:27