jquery traversing - 내 것보다 더 좋은 방법이 있어야합니다!

Question

나는 누군가가 요소 #TYPE에 액세스 할 수 내 HTML을 기반으로 #type_new 더 나은 방법이 있는지 알고 싶습니다 : 내가 거기 알고

$("a.toggle").unbind('click').click(function(){ 
    $.prev = $(this).parents().parent().prev().find("td#toggle"); 
    $.select = $.prev.find("#type"); 
    $.textbox = $.prev.find("#type_new"); 

    if($.textbox.is(':visible')==true) 
    $(this).find("small").html("Add New Type"); 
    else 
    $(this).find("small").html("Choose From Exisiting Types"); 
    $.select.toggle(); 
    $.textbox.toggle().val(""); 
}); 

: 여기

<tr> 
    <th>Type of Organization</th> 
    <td id="toggle"> 
    <select name="type" id="type"> 
     <option>Church</option> 
     <option>College</option> 
     <option>Theatre</option> 
    </select> 
    <input name="type_new" id="type_new" type="text" />       
    </td> 
</tr> 
<tr> 
    <th>&nbsp;</th> 
    <td><a class="toggle" id="type"><small>Add New Type</small></a></td> 
</tr> 

내 자바 스크립트입니다 자바 스크립트를 더 쉽게 만들 수 있도록 html을 배치하는 다른 방법들이 있지만 현재의 html을 기반으로하는 좋은 방법이 있습니다.

ID 나 클래스를 참조하지 않는 이유는 아약스 .load를 사용하여 더 많은 것을 생성하고 모든 요소가 동일한 ID와 클래스를 갖게된다는 점에 유의할 가치가 있습니다. 당신이 물어볼지도 모르는 색인을 사용하지 않겠습니까? 잘 거기에 있었고 그렇게했습니다. 실제로 모든 새로운 요소를 포함하기 위해 클릭 이벤트를 다시 바인딩하는 데 더 많은 코드를 사용해야합니다. 나는 가능한 가장 간단한 방법을 갈거야.

감사합니다.

업데이트 : 아약스 .load를 사용하여 동일한 요소를 페이지 아래쪽에 추가한다는 사실을 강조하고 싶습니다. 그들은 $ _POST 이유에 대해 다른 요소 이름을 가질 테지만, 나는 자바 스크립트 함수가 모든 인스턴스를 나타낼 때이를 처리하기를 원합니다. ID로만 참조하면 모든 요소가 페이지 아래로 업데이트됩니다.

Answer 1

ID는 고유해야합니다.

$.prev = $("td#toggle"); 
$.select = $("#type"); 
$.textbox = $("#type_new"); 

: 그 마크 업의 경우 그렇다면, 당신은 직접적으로 간단하게 대신 이렇게 코드의 처음 세 줄을 생략 할 수 그들을 선택하거나 수있는 복잡한 이송에 대한 필요가 없습니다

또는 클릭 핸들러의 전체 콘텐츠를 다음으로 대체 할 수 있습니다.

if($("#type_new").is(':visible')) { 
    $(this).find("small") 
      .html("Add New Type"); 
} else { 
    $(this).find("small").html("Choose From Exisiting Types"); 
    $("#type").toggle(); 
    $("#type_new").toggle().val(""); 
}