0

Raphaelを使用して簡単な再生/一時停止ボタンシステムを作成しようとしていますが、スコープの問題が発生し続けます。

ボタン自体は、RaphaelのおかげでSVGタグに埋め込まれた画像にすぎません。目標は、この「イベントサイクル」を持つことです。

  • play.pngが表示されている場合は、onmouseover remove()play.pngとshowplay-hover.pngを表示します
  • play-hover.pngが表示されている場合、onclick remove()play-hover.png show pause.png
  • pause.pngが表示されている場合は、onmouseover remove()pause.png show pause-hover.png
  • pause-hover.pngが表示されている場合は、onclick remove()pause-hover.png show play.png

それは本当にばかげているように見えますが、私はスコープとクロージャに本当に問題があります。これは私が現在持っているコードです：

  function toPlay(pauseHover) {
    pauseHover.remove();
    var play = paper.image("images/play.png", Img.X, Img.Y, Img.height, Img.width);
    play.node.onmouseover = toPlayHover(play);
  }
  
  function toPause(playHover) {
    playHover.remove();
    var pause = paper.image("images/pause.png", Img.X, Img.Y, Img.height, Img.width);
    pause.node.onmouseover = toPauseHover(pause);
  }
  
  function toPlayHover(play) {
    play.remove();
    var playHover = paper.image("images/play-hover.png", Img.X, Img.Y, Img.height, Img.width);
    playHover.node.onclick = toPause(playHover);
  }
  
  function toPauseHover(pause) {
    pause.remove();
    var pauseHover = paper.image("images/pause-hover.png", Img.X, Img.Y, Img.height, Img.width);
    pauseHover.node.onclick = toPlay(pauseHover);
  }
  
  var play = paper.image("images/play.png", Img.X, Img.Y, Img.height, Img.width);
  toPlayHover(play);

ファイアバグがコンソールにエラーを表示しないため、これが機能しない理由は正確にはわかりませんが、関数toPlayHover()内で関数を呼び出すことができないためだと思いtoPlay()ます。

4

1 に答える 1

1

これは、各関数をコールバックとして登録するのではなく、すぐに呼び出しているためです。修正するには、次のように各コールバックを無名関数でラップします。

play.node.onmouseover = function() { toPlayHover(play); };
于 2012-06-24T00:05:39.813 に答える