为什么在单击 jQuery 事件后 mp3url 变量没有得到安慰

Question

我想在 jquery 单击事件之外显示“mp3Url”变量。实际上是否可能来自下面的代码片段？看了很多文章都没用

<script>

var mp3Url;
        
// NOW I CLICK album-poster TO GET CURRENT SONG ID
$(".album-poster").on('click', function(e){

    mp3Url = $(this).attr('data-mp3');

});

//console.log( mp3Url );

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    listFolded: true,
    audio: [
            {
                name: 'Invisible Beauty',
                artist: 'Artist',
                url: mp3Url, // Here is the variable
                cover: 'photo.jpg'
            },
    ]
        
});

</script>

Answer 1

这取决于你想什么时候显示它。在目前的形式中，你的脚本做了三件事，

1. Declare mp3Url variable (no value assigned)
2. Create and register a function to be execute whenever album poster is clicked.
    a. Assign a value to the variable above (whenever the poster is clicked).
3. Print value of the above variable to console.

在第 2 步中，您刚刚创建了一个函数，'registered' 它会在将来响应某些事件时执行。当步骤 3 执行时，mp3Url 变量仍将具有 undefined 值，因为浏览器会立即运行步骤 1、2、3 一起执行，而不给用户单击任何内容的机会。稍后每当用户点击海报时，2 系列的 sub-steps 将被执行。

如果要打印值'When user clicks poster'，只需将控制台语句移到事件处理函数中即可。这是必需的，因为浏览器只会运行在用户操作时写入事件处理程序中的代码。

PS：您也可以在事件处理程序中移动变量。

Answer 2

试试这个，在声明 APlayer 不存在的情况下 mp3Url 不存在之前

var ap;
$(".album-poster").on('click', function(e){
    var mp3Url = $(this).attr('data-mp3');
    ap = new APlayer({
        container: document.getElementById('aplayer'),
        listFolded: true,
        audio: [
            {
                name: 'Invisible Beauty',
                artist: 'Artist',
                url: mp3Url, // Here is the variable
                cover: 'photo.jpg'
            },
        ]
    });
});

为什么在单击 jQuery 事件后 mp3url 变量没有得到安慰

Why mp3url variable is not consoling after clicking the jQuery event

javascript

jquery

audio-player