jquery를 사용하여 이전 td 요소를 표시합니다.

Question

저는 이런 종류의 질문에 100 억 번을 묻습니다. 나는 그들을 고려하여 내가 할 수있는 것을 사용했습니다.

기본적으로 단추를 클릭 할 때만 렌더링 할 텍스트 필드가 있습니다.

이것은 내 코드가 어떻게 보이는지 (레일에 루비를 사용하고 있기 때문에 루비에서 writtin입니다.) 또한이 코드는 부분적으로 하나의 페이지에 반복해서 표시됩니다.

<td class=search-form-block> 
    <form accept-charset="UTF-8" action="/foods/save_selected" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="nj7UzUO00UwgC0eeZk2GpZiKqz6PPTvLST1mINZCDR4=" /></div> 

    <input data-catcomplete-source="/foods/search" id="search_food_text_field" name="search_food_text_field" type="text" /> 

</td> 
<td class=remove-td-center> <a href="/meals/5" class="new-food-button">new food</a> </td> 

그리고 여기가 내가 일하는 것이 예측하지만하지 않았다 내 JQuery와있다 : 소스에서처럼

<td class=search-form-block> 
    <%= form_tag({:controller => "foods", :action => "save_selected"}, method: "post") %> 
    <%#= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %> 

    <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %> 

</td> 
<td class=remove-td-center> <%= link_to "new food", nil, {class: "new-food-button"} %>  </td>  

이것은 무엇을 보이는

$('.search-form-block').hide() 

$('.new-food-button').click(function(e){ 
    e.preventDefault(); 
    $(this).prev('td').toggle(); 
}); 

내가 가지고있는 문제는 토글 버튼을 눌렀을 때 페이지의 모든 양식이 전환되는 것입니다. 그 버튼에 대한 양식 만 렌더링하면됩니다.

미리 감사드립니다.

Answer 1

문제는 클릭 이벤트에 this입니다. 함수에서 this은 td 대신 link을 나타냅니다. 그래서 이전 td 당신이 이런 식으로 뭔가를해야 할 것 얻을 :

$(this).parent().prev('td').toggle(); 

당신이 다음 링크 거기에서 이전 TD의 부모를 얻을 곳.