0

我正在尝试在没有 Ajax 的情况下在不同页面之间制作加载指示器。我有一个包含 gif 的 .spin-wrapper 类的 div。所以我需要在加载页面时隐藏它，并在我单击链接时显示它。加载新页面时，它应该再次隐藏（依此类推）。

但是当我重新加载页面时它只工作一次。它加载并隐藏我的 div，然后在我单击链接后显示它（出现控制台消息）。但它不起作用。我在任何其他页面上看到我的 div 并且我的控制台消息也没有出现。

应用程序.js：

function toggleSpin() {
    $('.spin-wrapper').toggle()
    console.log('clicked');
}

$(document).ready(function () {
    $('.tooltip_cell').tooltip({container: 'body'})

    $('.spin-wrapper').hide()
    $('a').on('click',toggleSpin);
    console.log('loaded');

});

如何解决？

4

3 回答 3

2

我有一个包含 gif 的 .spin-wrapper 类的 div。所以我需要在加载页面时隐藏它，并在我单击链接时显示它。加载新页面时，它应该再次隐藏（依此类推）。

单击链接后不久该 div 将不再存在，因此当您到达新页面时它将再次隐藏，因为它默认为隐藏。相反，将其默认为可见，然后在窗口加载时将其隐藏。

$(window).on("load",function(){
    $(".spin-wrapper").fadeOut();
});

如果您愿意，您当然也可以在单击链接后显示它。

$('a').on('click',function(){
    $(".spin-wrapper").fadeIn();
});

然而，在点击时显示它可能会导致它不是很流畅，因为微调器会消失，然后再次显示。

于 2013-10-15T19:29:55.277 回答
2

如果您使用的是 rails 4 和 Turbolink，您的问题可能是您的 javascript 代码只加载了一次。尝试禁用 Turbolink（在asset/application.js 中）并测试您的代码。如果它有效并且你想继续使用 Turbolink，我推荐这个https://github.com/kossnocorp/jquery.turbolinks 也检查一下！ https://github.com/rails/turbolinks/ http://railscasts.com/episodes/390-turbolinks

于 2013-10-15T20:12:05.187 回答
1

Rails 使用 turbolinks 所以我们应该使用

$( document ).on('turbolinks:click', function() {
  $('#your_spinner_div').removeClass('hide-div');
});

在哪里，

.hide-div{
  display: none;
}

还添加

    $( document ).on('turbolinks:before-cache', function() {
  $('#your_spinner_div').addClass('hide-div');
});

所以当你点击浏览器返回时你不会看到微调器。

发布此答案是因为我尝试在上述答案中添加片段但没有奏效。希望这对将来不熟悉 Rails 的人有所帮助。

于 2019-02-13T11:22:23.037 回答