Question

注意：我已经尝试研究此问题并尝试了一些编码变体，但是我什么都无法正常工作。我认为可以使用jQuery replaceWith（可以使用选择器通配符来减少/重复使用所有函数中的代码）来实现以下目的-但我不知道该怎么做。

我有一个DIV，该DIV需要容纳多个视频播放器（重叠或堆叠在一起），每个播放器都必须位于其自己的具有唯一ID的嵌套DIV中。我要使用另一个IMG（导航菜单）DIV中的IMG来控制视频DIV的选择和显示。具体要求如下：

每个IMG应该通过onclick事件加载不同的视频DIV ID。
加载/显示一个视频DIV时，所有其他视频DIV需要隐藏。
每个视频的播放已经由单独的JavaScript函数控制，因此，将需要紧随其后的是播放功能（将每个视频DIV交换/替换为另一个视频DIV的机制）（所有这些都组合为每个视频的单个onclick事件））。

以下是一些相关的基本代码段：

<div class="col-4 text-right"><img src="images/1.png" width="60" height="60" alt="" onclick="play1()"></div>

这是当前IMG调用视频播放JavaScript的示例。总共将有大约10张图像用于触发10个视频的播放（每次点击时一对视频）。所有图像都可以使用 X .png命名约定，并且所有onclick事件都可以使用play X （）命名约定-通过编号配对。

<div class="col-8"><div id="vid1"></div></div>

这是嵌套视频DIV的示例。所有视频DIV都可以使用命名约定vid X ，并且所有视频DIV都包含在此col-8父DIV中。