javascript - 如何更改目标变量？

我制作了一个具有多个实例的快速音频播放器。当您单击播放时，播放变量将设置为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)
        }
    })
})

最佳答案

这是一种实现方法：

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