Javascript 我如何创建多个这样的代码

我如何创建多个这样的代码

我想有2或3个相同的代码，如：视频1，视频2，视频3嵌入视频相同的代码

<script type="text/javascript">
$("p iframe").hide();
function toggle(obj) {
          var obj=document.getElementById(obj);

          if (obj.style.display == "block") obj.style.display = "none";
          else obj.style.display = "block";
}


</script>

<a href="javascript:%20void(0);" onclick="toggle('q1')">Video 1 Youtube</a>

<br />
<div id="q1" style="display: none;">
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/b8B1O0Fak5s" width="420"></iframe></div>

$（“p iframe”）.hide（）；
功能切换（obj）{
var obj=document.getElementById（obj）；
如果（obj.style.display==“block”）obj.style.display=“无”；
else obj.style.display=“块”；
}

您的切换函数采用视频所在的div的名称。因此，您只需复制链接、div和iFrame

这在所有视频中都很常见

<script type="text/javascript">
$("p iframe").hide();
function toggle(obj) {
          var obj=document.getElementById(obj);

          if (obj.style.display == "block") obj.style.display = "none";
          else obj.style.display = "block";
}


</script>

$（“p iframe”）.hide（）；
功能切换（obj）{
var obj=document.getElementById（obj）；
如果（obj.style.display==“block”）obj.style.display=“无”；
else obj.style.display=“块”；
}

这是显示每个视频的链接，因此每次都需要复制

<a href="javascript:%20void(0);" onclick="toggle('q1')">Video 1 Youtube</a>

这是您的视频显示，因此也需要复制

<div id="q1" style="display: none;">
  <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/b8B1O0Fak5s" width="420"></iframe>
</div>

所以，要添加第二个和第三个视频，您所要做的就是遵循您的模式。注意现在所有的ID都是“q2”

---

更复杂的解决方案是使用一个div/iframe来传递视频的名称。这是汽车清洁剂解决方案，但我觉得你想要的是简单的解决方案？

也许你想要这样的

（假设jQuery）

if（类型（切换可见性）！=“功能”）{
$（“.toggle container iframe”）.hide（）；
var toggle_visibility=函数（）{
$（this）.parents（“.toggle container”）.find（“iframe”）.toggle（）；
}
$（文档）.on（“单击“，”.toggle container.toggle trigger”，toggle_visibility）；
}

一行中包含3个代码段的示例：

---

我添加了带有选择器的类，并删除了不需要的ID。

同一页面中不能有重复的ID，因此请尝试添加一些代码来生成这些ID。然后，只需检查是否已经定义了函数

切换
：
如果（切换）函数切换（obj）{…
我实际上一点也不明白你想做什么。我想创建一个嵌入不同主机的视频。比如视频1 Youtube，视频2 Vimeo，视频3 Dailymotion。带隐藏和显示。但另一个问题是我在编程方面不是很好，我只知道基本的HTML。你能帮我吗？@user3480984很高兴我能帮上忙。请向上投票e帮助您的答案，并将最合适的答案标记为已接受
<a href="javascript:%20void(0);" onclick="toggle('q2')">Video 2 Youtube</a>
<div id="q2" style="display: none;">
  <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/SomeOtherVideo" width="420"></iframe>
</div>

<script type="javascript/text">
    if (typeof (toggle_visibility) != "function") {
        $(".toggle-container iframe").hide();
        var toggle_visibility = function () {
            $(this).parents(".toggle-container").find("iframe").toggle();
        }
        $(document).on("click", ".toggle-container .toggle-trigger", toggle_visibility);
    }
</script>
<div class="toggle-container">
    <a href="javascript:void();" class="toggle-trigger">Video 1 Youtube</a>
    <br />
    <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/b8B1O0Fak5s" width="420"></iframe>
</div>