添加/刪除/更換

我不知道這是否是編寫這些代碼的最優化的方式，但我有什麼幾乎作品...添加/刪除/更換

這就是我想要做的事：

（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="" />

來源

2011-04-30 WonderBugger

只是一個側面說明。用你的答案提供一個jsfiddle鏈接，人們可以真正地測試發生了什麼。 – 2011-04-30 18:05:38

你是對的......我總是忘記那個......對不起......但是，我*確實知道了！ – WonderBugger 2011-04-30 18:15:35

請不要在問題標題中寫標籤。 – 2011-04-30 18:17:27

變化

currentValue.replace(uID,"");

要

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

也爲優化你的代碼可以使用jQuery的對象chainability。

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

來源

2011-04-30 18:19:22

謝謝你...我改變了代碼 – WonderBugger 2011-05-01 01:15:54

而不是試圖在每次做出選擇的時間來更新隱藏輸入，爲什麼不能有一個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-30 18:40:29 BradBrening

我也喜歡這個...謝謝你 – WonderBugger 2011-05-01 01:16:12

添加/刪除/更換

回答

相關問題