关于 JavaScript 范围的问题，是否有可能完成我正在尝试做的事情

Question

我正在尝试动态更改 YouTube API onclick 的 videoID。我有一个数据 src 包含 YouTube URL 的项目列表。当用户单击链接时，会弹出一个正在播放该特定视频的模式。视频结束后，它会重定向到另一个页面。

如果我对 ID 进行硬编码，它可以很好地工作，但我做不到。

我唯一担心的是由于 JavaScript 范围，我无法获取 videoID。你有什么推荐我试试的吗？

    $(document.body).on('click', ".video-btn", function (e) {
        var $videoSrc = $(this).data("src");
        console.log($videoSrc);

        var **getVidID** = $videoSrc.substring(26);
        console.log(getVidID); 
    });

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            playerVars: {
                'controls': 0
            },
            width: 1920,
            height: 1080,
            videoId: **getVidID,** I'd like to use the videoID here
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    };

    function onPlayerReady(event) {
        event.target.playVideo();
    };

    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && !done) {
            alert('Taking you to Review Material Now..')
            window.location.replace("http://www.google.com");
            done = true;
        }
    };

Answer 1

这是一种方法：

var getVidID; 
$(document.body).on('click', ".video-btn", function (e) {
    var $videoSrc = $(this).data("src");
    console.log($videoSrc);

    getVidID = $videoSrc.substring(26);
    console.log(getVidID); 
});

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    console.log(getVidID);
    player = new YT.Player('player', {
        playerVars: {
            'controls': 0
        },
        width: 1920,
        height: 1080,
        videoId: **getVidID,** I'd like to use the videoID here
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
};

请注意：getVidID 可能没有值，具体取决于您调用onYouTubeIframeAPIReady() 的位置/时间。点击事件函数必须在获取 id 之前运行。因此，您可能希望在其他函数中使用它之前验证它是否具有值。另外，请注意，该变量的值仅在单击事件触发时才会更改...