Question

如何创建像这样的多个代码。

我希望有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>

Answer 1

也许你想要这样的东西？

（假设jQuery）

<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>

连续3个片段的样本： http://fiddle.jshell.net/qTk7F/1/

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

Answer 2

您的切换功能会获取视频所在的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>

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

<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现在如何＆＃34; q2＆＃34;

<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>

更复杂的解决方案是使用一个div / iframe传递视频名称。这是一个更清洁的解决方案，但是我得到了一个简单解决方案之后的印象？

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

2 个答案: