导轨,Turbolinks和旋转器

Question

我想在点击时用微调器替换文本链接.我有这个:

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

但很明显,与.spinner类的所有链接都获得了微调器.我想只在被点击的链接上替换它,只有它有spinner类.

有什么建议？

Answer 1

您将拥有一些在“page:load”和就绪事件上触发的代码，以便它们适用于完整页面加载和 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') %>'>" );
});

让我知道这是否有帮助。