Question

我想在我的rails应用中的表格中切换2个不同链接（send_email和email_sent）的可见性。

<table >
<% @applications.each do |application| %>
 <tr>
  <td>
   <a href="mailto:grant@example.com" class="send_email">Invite for an interview</a>

   <a href="" class="email_sent">Undo</a>
  </td>
 </tr>
<% end %>
</table>

在我的CSS中我有

.email_sent{display: none;}

这是我的javascript

<%= javascript_tag do %>
 $(function(){
  $('.send_email > a').click(function(){
   $('.send_email').hide();
   $('.email_sent').show();
  });
  $('.email_sent > a').click(function(){
   $('.send_email').show();
   $('.email_sent').hide();
  });
 });
<% end %>

问题是此代码会切换所有email_sent和send_email个链接。

如何调整代码以仅切换特定行中链接的可见性？

Answer 1

它不能正常使用 Class ，这在每一行都很常见。尝试给它一个唯一的id并在javascript中使用例如： -

我假设应用程序包含数据库记录数组

<table >
  <% @applications.each do |application| %>
   <tr>
     <td>
       <a href="mailto:grant@example.com" id="send_email_#{application.id}">Invite for an interview</a>
       <a href="" id="email_sent_#{application.id}">Undo</a>
     </td>
   </tr>
<% end %>

然后在javascript中

<% @applications.each do |application| %>    
  <%= javascript_tag do %>
    $("#send_email_#{application.id} a").click(function(){
      $("#send_email_#{application.id}").hide();
      $("#email_sent_#{application.id}").show();
    });
    $('#email_sent_#{application.id} a').click(function(){
      $('#send_email_#{application.id}').show();
      $('#email_sent_#{application.id}').hide();
    });
<% end %>

如何在rails生成的表中切换链接的可见性？

1 个答案: