javascript - 使用 jQuery 显示前一个 td 元素

Question

我知道此类问题已被问过 100 亿次。我已经考虑过它们并尽我所能。

基本上，我有一个文本字段，我只想在单击按钮时呈现它。

这就是我的代码的样子(它是用 ruby​​ 编写的，因为我在 rails 上使用 ruby​​)。这也是部分的，所以这段代码会在一个页面上一遍又一遍地显示。

<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>    

这是源代码的样子:

<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:

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

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

我遇到的问题是，当我点击切换按钮时，页面上的所有表单都会被切换。我只想呈现该特定按钮的表单。

Answer 1

问题是您的点击事件中的 this。在您的函数中，this 指的是 link 而不是 td。所以要获得以前的 td 你需要这样的东西:

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

从哪里获得链接的父级，然后从那里获得上一个 td。