javascript - 我将如何更改目标变量？

Question

我制作了一个具有多个实例的快速音频播放器。当您点击播放时，playing 变量设置为 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 中的适当对象数组，并设置相关的playing必要时。