單擊時如何在鏈接中添加和刪除類名？

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 hidden">Undo</a>
  </td>
 </tr>
<% end %>
</table>

在我的CSS中

.hidden{display: none;}

這是我的javascript

<%= javascript_tag do %>
 $(function(){
  $('.send_email > a').click(function(){
   // add the hidden class to send_email
   // remove the hidden class from the next email_sent link
  });
  $('.email_sent > a').click(function(){
   // add the hidden class to email_sent
   // remove the hidden class from the previous sent_email link
  });
 });
<% end %>

Answer 1

您可以簡單地使用jQuery中的removeClass()和addClass() 。

刪除類文檔。

添加類文檔。

Answer 2

你做錯了。 $('.send_email > a')表示您具有send_email類到錨點的父元素。 $('a.send_email')是選擇帶有類別的錨點的正確方法。

我會使用hide() ， show()這樣的：

$('a.send_email').click(function(){
  $(this).hide();
  $('.email_sent').show();
});

$('a.email_sent').click(function(){
  $(this).hide();
  $('.send_email').show();
});