2011-12-17 72 views
2

我做了一个有多个实例的快速音频播放器。当你点击播放时,播放 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) 
     } 
    }) 
}) 
+2

(与你的问题无关):JS不是PHP,变量不必以`$`开始。它有点不好意思;) – 2011-12-17 00:16:00

+0

我完全同意......我只是改变它,因为我误解了我的问题的其他解决方案。哈。 **修正** – Tom 2011-12-17 00:23:54

回答

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数组中的适当对象,并在必要时设置相关playing