0

ページが読み込まれるたびに実行されるタイマーに基づいてループしたいさまざまなヘッダーがあります。現在、私が持っているものは一度だけ機能しますが、最初にヘッダーを変更した後に停止します。私はJavaScriptがあまり得意ではないので、誰かが私を正しい方向に向けることができれば幸いです.

以下は私が現在持っているものです。

lib/Rotator.rb:

class Rotator
 def self.header_rotator(number)
   partials = ["header", "header2", "header3", "header4", "header5"]
   random_header = partials[number]
 return random_header
 end
end

次に、application.html.haml のヘッダー セクションに次のように記述します。

var start_rotate = setTimeout(rotate, 5000);
     function rotate() {
      remote_function(:url => {:action})
      $("#header").replaceWith('#{escape_javascript( render :partial => "shared/#{Rotator.header_rotator(rand(5))}")}')
      start_rotate = setTimeout(rotate, 5000);
     }

私が言ったように、これはうまくいきますが、一度だけ回転してから停止します。

どんな助けでも大歓迎です！

4

1 に答える 1

1

これは js に関するものではなく、何がどこでいつ実行されているかを理解することに関するものです。

レンダリングされている HTML を見ると、より明確になるはずです。へのその呼び出しはescape_javascript、render正確に 1 回発生します。つまり、メイン ページの読み込みのレンダリング中にその文字列が補間されるときです。したがって、2 回目 (および 3 回目、4 回目、5 回目...) は、rotate() が実行され、ヘッダーがまったく同じ HTML に置き換えられます。

jquery を使用していると仮定すると、load メソッドで次のことができます。

$('#header').load('/some/server/path')

このリクエストに応答するときは、レイアウトなしでレンダリングすることを忘れないでください。

最後に、本当に Ajax を使いたいですか? 前もってすべてのヘッダー バリアントをロードし、JavaScript を使用して順番に表示することができます。(正確にこれを行う多くのjqueryサイクルまたはslideshiwプラグインがあります)

于 2012-05-24T23:12:56.433 に答える