我如何改变一个目标变量

How would I change a targets variable?

本文关键字：变量 一个 目标 改变 何改变      更新时间：2023-09-26

我制作了一个具有多个实例的快速音频播放器。当单击播放时，playing变量被设置为true。如果单击的另一个实例。playAudio，我试图将 lastplay 实例设置为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。
相关文章：