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

Question

所以我有五个不同的 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 链接有关？

Answer 1

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

• 第一个src 值在array 中提供
• 现在循环使用类 .srcChanger 的所有标签，并添加了在 click 上活动的事件侦听器。
• 然后根据i标签的值从array中获取值的函数被执行

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>

Here is the working example of above code