Question

我对Javascript没有那么多经验，而且我整天都在努力解决这个问题。

我正在使用Jquery创建嵌入式YouTube视频ID的数组：

$(function() {

            $('li').on("click",function(){
                alert($(this).attr('data-pile'));
                var pilename = $(this).attr('data-pile');
                var videoIDs = [];
                $("li[data-pile='"+pilename+"']").each(function(index){
                    videoIDs.push($(this).attr('id'));
                });
                $.each(videoIDs,function(){ 
                });
            });

        });

我需要在这个JS中使用数组：

<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [

     //my array of Ids here   

    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>

在嵌入视频的每个div中，我正在应用与视频ID相同的ID。我应该如何使这两个脚本工作？如果有人能指出我正确的方向，我真的很感激。

Answer 1

您正在声明您的videoIDs数组两次，一次是在您的点击事件中，一次是在您的第二次脚本。

点击事件中的一个是该功能的本地，而另一个是全局的。 Javascript具有函数范围，因此一旦函数结束，click事件就会被丢弃。

如果你删除点击事件中的那个，我相信它应该有效。您还应该删除$ .each ...因为我认为它不会有帮助（您正在尝试制作播放列表，对吧？）。

应该注意的是，使用全局变量污染全局命名空间被认为是不好的做法。如果这是您页面上的所有代码，则可能不是问题。

Answer 2

尝试这样做：在“click”事件后添加自定义侦听器。没有检查你的阵列形成部分，使用自定义阵列进行测试，希望你不会遇到问题。

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

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
        });
    }    
    $(function(){
        $(document.body).on("click",".play", function(){
            player.stopVideo();
            var pilename = $(this).attr('data-pile');
            var videoIDs = [];
            $("li[data-pile='"+pilename+"']").each(function(index){
                videoIDs.push($(this).attr('id'));
            });

            if(videoIDs.length > 0){

                currentVideoId = 0;

                player.loadVideoById(videoIDs[0]);

                function onPlayerStateChange(event) {
                    if (event.data == YT.PlayerState.ENDED) {
                        currentVideoId++;
                        if (currentVideoId < videoIDs.length) {
                            player.loadVideoById(videoIDs[currentVideoId]);
                        }
                    }
                }

                player.addEventListener("onStateChange", onPlayerStateChange)

                player.playVideo();
            }

        });
    });
</script>

在Jquery中使用数组

2 个答案: