Question

我有一个包含3个视频的页面。当您单击视频时，它会以模态形式打开，然后单击以关闭视频。很好。

有CSS可以放置视频并在必须关闭的位置绘制。然后是Javascript文件，该文件读取所有的类名并创建单击以打开和关闭视频。当前，我需要一大堆名为001、002、003 ...的类，这些类链接到相同数量的JavaScript文件，这些文件也已使用这些新名称和视频链接进行了编辑。因为同一ID文件中的类ID必须全部不同，所以尽管名称相同，但样式表中我也需要其他代码。

此页面将包含30个或更多视频。

我知道堆栈溢出是用于调整彼此的代码，但是如果您至少可以将我指出正确的方向，那将非常有帮助。

我正在寻找一种制作YouTube视频列表并将其附加到链接的方法，以便只需要一个CSS脚本即可同时对所有视频进行样式设置，并且只需要一个Javascript文件即可播放所有视频其中的相同方式。

我需要的（我认为）是JavaScript中的方法，用于捕获被单击的字符串，并将其放入代码段中，然后显示相关的视频。

因此，如果我单击视频＃12，则JS将显示一个包含youtube * com / embed /（video＃12）/的模态。

另一个例子是，在电影院放映室中的一个人播放8个不同的视频，而每个人都播放1个视频，而不是8个。

Answer 1

您可以将带有视频链接的属性附加到每个视频元素中。然后，您可以为所有元素提供相同的类，甚至可以将该类作为目标。单击它们时，您的JS代码应该从附加的属性中检索视频链接，并将其显示在模型中。

所以它就像：

<ul class="video-list">
    <li class="video-link" data-link="https://youtube.com/embed/[video#1]/.">The link title</li>
    <li class="video-link" data-link="https://youtube.com/embed/[video#2]/.">The link title</li>
    ...
</ul>

然后在每个元素上添加一个事件侦听器：

var videoLink = document.querySelector(".video-link");

videoLink.addEventListener('click', function() {
    var link = this.getAttribute("data-link");

    openModal(link); // A method that opens the modal.
});

这样，您可以根据需要向video-link类添加样式，以定位所有视频链接，而无需使用不同的ID或类。由于它们都将自己的链接直接附加到该元素，因此也不会限制视频的数量。

也许这会指引您正确的方向？

Answer 2

解决了！请参阅 Link or button sets a variable, then calls the script 结果，我涌动着每个人在帮助方面的表现如何：）

根据链接[js]

2 个答案: