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

Question

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

内嵌框架：

Html iframe 代码：

<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 有预览 class，所以 jquery 应该在点击 div with .preview class 时激活一个功能，然后，给定 divs 的 ID，它应该更改 iframe 的 src，但它似乎不起作用。

编辑：好的，所以我创建了一个全新的页面并尝试了@Rana 方法，但它在我的浏览器中仍然不起作用，所以我去了控制台，然后出现了下一个错误：

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

Answer 1

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

前 src 个值在 array
现在使用 class .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

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

How can I change iframe src by clicking on different divs?

html

javascript

css

iframe

jquery