我在网页浏览器上设计了一个类似iPhone的屏幕，我正在测试这个应用程序。它工作得很好，直到我想叫出另一组视频的时候。

What works

该应用被构造成使得当用户看到屏幕时，她被引导到具有垂直视频的频道。左上方和右上方的按钮可前进到下一个和上一个视频。

<div id="topVid" class="videoContainer">
        <div class="topHorizontalButtonRow">
          <a href="#" class="buttonLeftTriangleBlue" onClick="return Vids.prev();"></a>
          <a href="#" class="buttonRightTriangleBlue" id="nextButtonTop" onClick="return Vids.next();"></a>
         </div>

        <video class="topVid" loop onclick="this.paused? this.play() : this.pause()" >
        <source src="videos/ParisisBurning_660x370_I_went_to_a_ball.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video>
    </div>

有一个“频道”按钮，如果按下该按钮，则向用户显示一个较小的窗口，其中用户可以通过点击第二组按钮“下一个”和“上一个”按钮来查看其他频道。

<div id="bottomVid" class="videoContainerTwo hiddenElement">

    <div class="topHorizontalButtonRow">
    <div class="buttonLeftTriangleBlue"></div>
    <div class="buttonRightTriangleBlue"></div>
    </div>

    <video loop onclick="this.paused? this.play() : this.pause()" >
    <source src="videos/Politics_Refugee_Sign.mp4"  type="video/mp4">
    Your browser does not support the video tag.
    </video>

jquery显示/隐藏较小窗口：

$(".buttonTeardropChannelBlue").click( function (){
  if( $("#bottomVid").is(':visible') ) {
      $("#bottomVid").hide();

      } else {
        $("#bottomVid").show();
      }
  });

如果用户想要观看该特定频道，她可以点击较小的窗口，该窗口隐藏当前窗口并前进到另一个频道。可以点击视频，一旦发生这种情况，用户将被引导到下一个频道。
下面是完美地推进当前选择的视频的代码，它包含了排列在数组中的视频。

var Vids = (function() {
    var _currentId = -1;
    var _urls =
    ["videos/ParisisBurning_370x660_Get_Into_The_Suits_Vert.mp4","videos/ParisisBurning_370x660_School_Vert.mp4","videos/ParisisBurning_660x370_I_came_I_saw_Vert.mp4", "videos/ParisisBurning_660x370_I_went_to_a_ball.mp4"]; // literal array
    return {
        next: function() {
            if (++_currentId >= _urls.length)
                _currentId = 0;
             return this.play(_currentId);
        },
        prev: function() {
            if (--_currentId < 0)
                _currentId = _urls.length - 1;
            return this.play(_currentId);
        },
        play: function(id) {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = _urls[id];
            myVideo.load();
            myVideo.play();
            return false;
       }
    }
})();

什么不行

问题：显示和隐藏多个视频列表

但是，问题开始时，我想选择一个不同的视频类，它有完全相同的代码，除了不同的视频。我已经将函数的名称改为VidsTwo，但问题仍然存在。

var VidsTwo = (function() {
    var _currentId = -1;
    var _urls = ["videos/Politics_Atl_We_are_the_people.mp4","videos/Politics_Atlanta_Whose_Streets.mp4",  "videos/Politics_Womens_March_Washington_CBS_VERT.mp4",
    "videos/Politics_No_bans_no_walls_America_is_home_to_all_VERT.mp4",
        "videos/Politics_Let_them_in_VERT.mp4",
    "videos/Politics_Tear it Down_JFK_VERT.mp4",
    "videos/Politics_This_is_What_America_Looks_Like_embrace.mp4",
    "videos/Politics_This_land_was_made_VERT.mp4", "videos/Politics_We_need_an_independent_investigation_town_hall.mp4",
  "videos/Politics_Just say no_town_hall_VERT.mp4", ]; // literal array

    return {
        next: function() {
            if (++_currentId >= _urls.length)
                _currentId = 0;
             return this.play(_currentId);
        },
        prev: function() {
            if (--_currentId < 0)
                _currentId = _urls.length - 1;
            return this.play(_currentId);
        },
        play: function(id) {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = _urls[id];
            myVideo.load();
            myVideo.play();
            return false;
       }
    }
})();

问题仍然存在：按钮将继续播放当前频道的视频以及新频道的视频，并且不会隐藏当前视频。我理解这是因为在JavaScript代码中，它使用了select元素by标签，即“video”。所有的数组列表都有“视频”，所以它正在播放所有的数组列表。
这个问题的最佳解决方案是什么，因为我希望能够将视频分成具有类似主题内容的类别“频道”，并且用户在查看第二个较小的视频窗口时会调用此类别？
核心问题

有没有办法让它不播放数组的选择？我可以在JavaScript代码中做什么改变来表明这些独立的视频数组不属于同一个类？如何在代码中明确这些视频虽然都是视频，但属于不同的类别，因此只能在调用其特定类别时才能播放？

头脑 Storm 解决方案：

• 我想我可能需要第二个div，它将有第二行按钮来调用第二个函数，因为prev和next表示为每个视频类声明的单独变量......但这对我的新手技能来说有点复杂：）
• 或者，父类上的每个视频都应该作为一个隐藏的div保存在html中，并使用“show”调用

父div的下一个子div”，而不是保存为
JavaScript代码？

• 下一步是为每个视频添加字幕文本，所以也许在html上单独隐藏div比将视频存储为JavaScript数组更好？
• 这基本上是一个原型/测试版的东西，将成为一个应用程序，所以还没有数据库，（这将使它更容易

一旦我开始更深入的用户测试，最终存储此信息）。此并发症仅用于测试：）

**更新：**我仍然很好奇最好的解决方案是什么，但是我决定，在这种情况下，直接向html添加div并使用jquery的下一个兄弟选择器。因为我会有一些特定于某些视频的文本，它们无论如何都不会正确连接到JavaScript数组。我发现JavaScript数组解决方案“更酷”，但它最终可能不是最好的。