Rails, Turbolinks and spinner

Question

我试图在点击时用一个旋转器替换文本链接。 我有这个：

$(document).on('page:fetch', function(e) {
  $('.spinner').replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
});

但很明显所有带有.spinner类的链接都会得到旋转器。我只想替换点击的链接，而且只有当它具有spinner类时才替换。

有什么建议吗？

- jriff

---

让我看看我是否理解正确：当链接被点击时，您希望它被旋转器替换？ - Roberto Poo

是的！点击的链接（触发页面获取）. - jriff

这些链接是否在被获取的页面部分中？ - Roberto Poo

1. 点击链接
2. 用旋转器替换链接文本
3. 获取新页面

- jriff

Answer 1

您需要编写一些代码，它将在'page:load'和ready事件上触发，以便它们能够适用于完整页面加载和Turbolinks页面加载。下面的代码将在被点击的'.spinner'上添加一个值为true的'data-click'属性。

#inside both the ready and 'page:load' events
$('.spinner').on('click', function(e) {
  $(this).attr('data-clicked', true);
});

以下代码将查找具有值为true的data-clicked属性的'.spinner'，并在其上应用旋转图像。

$(document).on('page:fetch', function(e) {
  $('.spinner[data-clicked="true"]').replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
});

如果这有帮助，请告诉我。

- Gjaldon

---

@jriff 刚刚用不同的方法更新了我的答案。 - Gjaldon

是的！成功了（但你应该在顶部代码片段中将"data-click"更改为"data-clicked"）。 - jriff

你能告诉我为什么这种方法有效而我的方法不行吗？我真的看不出来有什么显著的差别。 - jriff

我现在明白了 - 这是一种获取被点击链接的方法，而不使用事件对象（该对象没有任何关于事件触发器的信息...） - jriff

非常感谢您的回答 - 它确实帮了很大的忙。享受奖励吧 :) - jriff

Answer 2

使用“on click”事件来更改具有“spinner”类的链接，以便在单击它们时，它们会变成旋转器。

$('.spinner').on("click", function() {
  $(this).replaceWith( "<img src='<%= asset_path('layout/spinner.gif') %>'>" );
});

然后，只有被点击的那些会被改变。

- Roberto Poo

---

恐怕那样行不通。我试过了（令人难以置信的是，那正是你提出的完全相同的代码）。在内容被替换之前，下一页就已经加载了。我认为Turbolinks正在幕后做些什么。我在问题中粘贴的代码是有效的——旋转图标会在页面更改之前显示。但这会影响到所有链接，而这并不是本意。 - jriff