如何通过点击不同div元素修改iframe的src属性

• 核心语法错误：控制台报错直接指向this.attr这行代码。事件回调函数中的this是原生DOM对象，不具备jQuery的attr方法，必须用$(this)包裹转换为jQuery对象后才能调用attr方法。
• 逻辑适配问题：原有代码的递增/递减逻辑更适合「上下翻页」场景，你现在是点击指定div跳对应视频，完全可以简化逻辑，直接给每个.preview div 设置和视频数组索引对应的ID（比如5个div的id分别设为0/1/2/3/4），点击时直接取ID作为索引取对应链接即可，避免逻辑错误。
• 前置依赖检查：确认你在代码执行前已经正确引入jQuery库，否则$符号会直接报错。

修改后的jQuery代码 #

// 按顺序对应5个.preview div的视频地址
const 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"
];

$(document).ready(function(){
  // 给所有.preview绑定点击事件
  $(document).on('click', '.preview', function(){
    // 取当前点击div的id作为数组索引
    const index = parseInt($(this).attr('id'));
    // 直接替换iframe的src
    $('#iframe').attr('src', locations[index]);
  });
})

注意：给每个触发点击的.preview div设置ID为0到4，和locations数组的顺序一一对应即可。

无需jQuery的原生JS方案（可选） #

如果你不想依赖jQuery，可以用原生JS实现，完全避免依赖问题：

const 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"
];
const iframe = document.getElementById('iframe');

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('preview')) {
    const index = parseInt(e.target.id);
    iframe.src = locations[index];
  }
});

内容的提问来源于stack exchange，提问作者Carl