切换远程链接

Question

我有一个链接，检索数据和显示所有细节，这是很好的工作。然而，我希望它的作用就像一个切换，其中删除细节后，第二次点击。它也不应该将ajax请求发送到服务器。

也许应该保存一些状态以便知道，要么显示细节，要么删除它们？做这件事最好的方法是什么？这是一个链接：

= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true

Answer 1

我想你可以用小小的javascript来做。

= link_to "details", testitemlogs_path(testitem_id: testitem.id), remote: true , id:'details-button'

$('#details-button').click(function(e){
    if($(this).hasClass('data-fetched')) {
      $('#target_div_id').remove(); //You can do whatever you want like hide or remove it from page
      e.preventDefault();
      e.stopPropagation();
     }
  $(this).toggleClass('data-fetched');
 });

此脚本在锚点上切换data-fetched类并检查该类是否存在，然后不要获取数据并隐藏/删除目标div。

使用要隐藏的实际容器id更改target_div_id

Answer 2

我认为在jQuery/Javascript的帮助下可以做到这一点。

最初，您可以在页面加载时显示link_to按钮。

通过单击link_to，您还应该隐藏当前的link_to按钮，并显示另一个具有不同id的按钮。

然后，通过单击另一个按钮，可以隐藏页面的详细信息形式。