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 コードが 1 回しかロードされないことです。(asset/application.js で) Turbolink を無効にして、コードをテストしてみてください。それが機能し、Turbolink を使い続けたい場合は、これをお勧めします https://github.com/kossnocorp/jquery.turbolinks こちらもチェックしてください! https://github.com/rails/turbolinks/ http://railscasts.com/episodes/390-turbolinks

于 2013-10-15T20:12:05.187 に答える