Как изменить переменную цели?

Question

Я сделал быстрый аудиоплеер с несколькими экземплярами. Когда вы нажимаете для воспроизведения, игра , играющая var, равна 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
• хранить ссылку на каждый объект Audio в качестве элемента массива в глобальном массиве Audios; используя уникальный идентификатор, как индекс
• lastPlay теперь содержит только уникальный идентификатор последнего воспроизводимого аудио-элемента; Я использую его для доступа к соответствующему объекту в массиве Audios и при необходимости устанавливаю relavent playing.