我在网络浏览器上设计了一个类似 iphone 的屏幕，我正在测试这个我正在构建的应用程序。直到我想调出另一组视频为止，它都非常有效。

什么有效

该应用程序的结构使得当用户看到屏幕时，她被定向到一个具有垂直视频的频道。左上角和右上角的按钮前进到下一个和上一个视频。

    <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 代码中，它使用“video”标签的 select 元素。并且所有数组列表都有“视频”，所以它正在播放所有这些。

这个问题的最佳解决方案是什么，因为我希望能够将视频分为具有相似主题内容的“频道”类别，并且用户在查看第二个较小的窗口时会调用这些类别视频？

核心问题

有没有办法让它不播放一系列数组？我可以在 Javascript 代码中进行哪些更改以表明这些单独的视频数组不属于同一类？如何在代码中明确这些视频虽然都是视频，但属于不同的类别，因此只有调用了它们的特定类别才能播放？

头脑风暴解决方案：

• 我想我可能需要第二个 div，它会有第二行按钮来调用第二个函数，因为 prev 和 next 表示为每一类视频声明的单独变量......但这得到了我的新手技能有点复杂：）
• 或者，父类上的每个视频都应该作为隐藏的 div 保存在 html 本身上，并且应该通过使用“显示
  父 div 的下一个子级”来调用，而不是
  在 javascript 代码中保存为数组？
• 下一步是向每个视频添加选取框文本，因此与将视频存储为 javascript 数组相比，在 html 本身上拥有单独的隐藏 div 是更好的解决方案？
• 这基本上是一个原型/测试版，用于将成为应用程序的东西，因此还没有数据库，（
  一旦我开始更深入的用户测试，最终将更容易存储这些信息）。此并发症仅用于测试:)

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