2011-04-30 3 views
0

를 교체/제거,하지만 난 거의 작품을 ... 무슨추기은 /는이 코드를 작성하는 가장 최적의 방법인지 잘 모르겠어요

이것은 내가 할 노력하고있어입니다 : 나는 t을 대체하지 않습니다

(2) 중 하나를 추가하여 숨겨진 입력 필드를 업데이트하거나 <li id>

주를 제거 클릭하면

(1) 다른 사업부에 <li></li> 요소를 이동 그는 "u40, u56, u98"등의 값을 가질 수 있도록 숨겨진 입력 필드에서 값을 추가합니다 ...

따라서 사용자가 <li>을 클릭하면 추가 가능한의 클래스 요소, 그 부모 <ul>의에서 제거하고 다른 사업부의 <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="" /> 
+1

단지 옆의 노트. 사람들이 실제로 일어난 일을 실제로 테스트 할 수있는 답변과 함께 jsfiddle 링크를 제공하십시오. –

+0

당신은 ... 나는 항상 내가 * * 알아낼 않았다 오른쪽 죄송합니다 ... 그것에 대해 잊지 ...하지만있어! – WonderBugger

+0

문제 제목에 태그를 쓰지 마십시오. –

답변

1

변화

currentValue.replace(uID,""); 

코드 당신이 JQuery와 chainability 개체를 사용할 수 있습니다 최적화를위한 또한

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

에.

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

내가 나뿐만 아니라이 좋아하는 코드 – WonderBugger

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()); 
} 

, 당신은 숨겨진 요소가 선택한 항목과 동기화에 머물고에 대해 걱정할 필요가 없습니다.

+0

을 변경했다 ... 그 주셔서 감사합니다 ... 그 주셔서 감사합니다 – WonderBugger

관련 문제