时间戳

首页 > 解决方案 > 如何通过单击不同的 div 来更改 iframe src？

javascript - 如何通过单击不同的 div 来更改 iframe src？

问题描述

所以我有五个不同的 div 容器和一个 iframe。我需要根据单击的 div 更改 iframe 的 src。它们是 youtube 链接，所以每次我点击特定的 div 时，都应该更改 iframe src。Divs，单击应更改的 iframe：

在此处输入图像描述

框架： 在此处输入图像描述

iframe的html代码：

<div class="full">
                <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
            </div>

我找到了某种解决方案，但它似乎不起作用：

var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA", 
                    "https://www.youtube.com/embed/c7nRTF2SowQ", 
                    "https://www.youtube.com/embed/6LOD-pwJY6E",
                    "https://www.youtube.com/embed/8X2kIfS6fb8", 
                    "https://www.youtube.com/embed/p5yUKjOOWvM"
                ];
      var currentIndex = 0;
      var len = locations.length;
      $(document).ready(function(){
        $(document).on('click', '.preview', function(){
            currentIndex = this.attr("id") == "1" ? 
            currentIndex < len - 1 ? ++currentIndex : 0 : 
            currentIndex > 0 ? --currentIndex : len - 1;

        $('#iframe').attr('src', locations[currentIndex]);
    });
        })

所以基本上，div有预览类，所以当点击带有.preview类的div时jquery应该激活一个功能，然后，给定div的ID，它应该改变iframe的src，但它似乎不起作用。

编辑：好的，所以我创建了一个全新的页面并尝试了@Rana 方法，但它仍然无法在我的浏览器中运行，所以我转到控制台并出现下一个错误： 在此处输入图像描述

所以我不确定，也许它与从 javascript 代码加载 youtube 链接有关？

标签： javascripthtmljquerycssiframe

解决方案

这是一个src点击按钮更改的工作示例，每次更改src都会显示。

  • 第一个src值在array
  • 现在遍历所有带有 class 的标签.srcChanger并添加了活动的事件侦听器click。
  • 然后执行array根据i标签的值取值的函数

var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA",
  "https://www.youtube.com/embed/c7nRTF2SowQ",
  "https://www.youtube.com/embed/6LOD-pwJY6E",
  "https://www.youtube.com/embed/8X2kIfS6fb8",
  "https://www.youtube.com/embed/p5yUKjOOWvM"
];

var btnSrc = document.getElementsByClassName("srcChanger");
for (let i = 0; i < btnSrc.length; i++) {
  btnSrc[i].addEventListener('click', function() {
    document.getElementsByClassName("responsive_frame")[0].src = locations[i];
    document.getElementById("demo").innerHTML = locations[i];
  })
}
<div class="full">
  <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
</div>
<button class="srcChanger">Btn1</button>
<button class="srcChanger">Btn2</button>
<button class="srcChanger">Btn3</button>
<button class="srcChanger">Btn4</button>
<button class="srcChanger">Btn5</button>


<div id="demo"></div>

这是上述代码的工作示例

推荐阅读