どのようにしてターゲット変数を変更できますか？

Question

私は、複数のインスタンスを持つクイックオーディオプレーヤーを作った。クリックすると、を再生するがtrueに設定されます。 .playAudioの別のインスタンスをクリックすると、lastPlayedインスタンスをfalseに設定しようとしています。

私は分からない部分をコメントしています。

のjQuery：

var lastPlay 
var lastSelected 
$('.playAudio').each(function(){ 
    var audio = $(this).find('audio').get(0); 
    var playing = false 

    $(this).hover(function() { 
     if (playing) { 
      $(this).css({backgroundPosition: '-60px -60px'}) 
     } else { 
      $(this).css({backgroundPosition: '0px -60px'}) 
     } 
    },function() { 
     if (playing) { 
      $(this).css({backgroundPosition: '-60px 0'}) 
     } else { 
      $(this).css({backgroundPosition: ''}) 
     } 
    }); 

    $(this).click(function(){ 
     if (playing) { 
      playing = false 
      $(this).css({backgroundPosition: '0 60px'}) 
      audio.currentTime = 0 
      audio.pause() 
     } else { 
      if (lastPlay) { 
       //** I'm trying to change the lastSelected's "playing" to false 
       lastPlay.pause() 
      } 
      playing = true 
      $(this).css({backgroundPosition: '-60px -60px'}) 
      audio.play() 
      lastPlay = audio 
      lastSelected = $(this) 
     } 
    }) 
}) 

Answer 1

ここでそれを行うための一つの方法です：

var lastPlay, 
    lastSelected, 
    Audios = []; 
$('.playAudio').each(function(i){ 
    var Audio = {}; 
    Audios[i] = Audio; 
    Audio.audio = $(this).find('audio').get(0); 
    Audio.playing = false; 

    $(this).hover(function() { 
     if (Audio.playing) { 
      $(this).css({backgroundPosition: '-60px -60px'}); 
     } else { 
      $(this).css({backgroundPosition: '0px -60px'}); 
     } 
    },function() { 
     if (Audio.playing) { 
      $(this).css({backgroundPosition: '-60px 0'}); 
     } else { 
      $(this).css({backgroundPosition: ''}); 
     } 
    }); 

    $(this).click(function(){ 
     if (Audio.playing) { 
      Audio.playing = false; 
      $(this).css({backgroundPosition: '0 60px'}); 
      Audio.audio.currentTime = 0; 
      Audio.audio.pause(); 
     } else { 
      if (lastPlay && Audios[lastPlay]) { 
       Audios[lastPlay].audio.pause(); 
       Audios[lastPlay].playing = false; 
      } 
      Audio.playing = true; 
      $(this).css({backgroundPosition: '-60px -60px'}); 
      Audio.audio.play(); 
      lastPlay = i; 
      lastSelected = $(this); 
     } 
    }); 
}); 

私はいくつかの方法でスクリプトを変更しました：

• 私が最初にキャプチャしていますjQueryが.eachに渡し、オーディオプレーヤー間の一意の識別子として使用するパラメータ
各オーディオプレーヤ <audio>要素について
• 、それはplaying状態Audio
• 私はAudiosグローバル配列内の配列要素として各Audioオブジェクトへの参照を格納するローカル・オブジェクトに保管されています。ユニークな識別子をインデックスとして使用する
• lastPlayは、最後に再生されたオーディオ要素の一意の識別子のみを保持するようになりました。私はそれをAudios配列内の適切なオブジェクトにアクセスするために使用し、必要に応じてrelavent playingを設定します。