如何使用jQuery点击元素后将data-embed链接设为iframe的src？

你的代码存在几个明确问题导致无法正常运行，下面逐一说明并给出修正方案：

核心问题：错误使用Base64解码 #

你用window.atob()尝试解码data-embed里的链接，但你的data-embed属性值本身是明文链接，并非Base64编码后的字符串，解码操作会直接报错，导致iframe的src无法正常设置。

其他次要问题 #

• 循环内重复执行选中状态设置：$(videoItems).first().addClass('selected')被放在for循环里，会被重复执行多次，完全没必要。
• 点击事件中event.target的不确定性：如果.vid-item内部有子元素，点击时event.target可能不是a标签本身，导致拿不到data-embed属性。
• 未阻止a标签默认跳转：点击a标签会触发页面跳转，直接中断iframe切换逻辑。
• 函数执行方式错误：最后(jQuery);无法正确触发函数执行，需要确保DOM加载完成后再执行代码。

修正后的完整代码 #

JavaScript（结合jQuery简化写法） #

$(function() {
  const videoIframe = $('#iframe-embed');
  const videoItems = $('.vid-item');

  // 初始化第一个视频
  videoIframe.attr('src', videoItems.first().data('embed'));
  videoItems.first().addClass('selected');

  // 绑定点击事件
  videoItems.on('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 设置iframe的src属性
    videoIframe.attr('src', $(this).data('embed'));
    // 更新选中状态
    $(this).addClass('selected').siblings().removeClass('selected');
  });
});

HTML（保持原结构即可） #

<div id="player-wrap">
  <div class="responsive-vid">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" height="350px" id="iframe-embed" width="100%" target="_blank"></iframe>
    <div class="playlist-wrap">
      <div class="video-list">
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 01</a>
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 02</a>
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 03</a>
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 04</a>
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title5=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 05</a>
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 06</a>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

1. 移除window.atob()：直接使用data-embed中的明文链接。
2. 用jQuery的data()方法获取data-*属性，比原生getAttribute()更简洁可靠。
3. 将初始化选中状态的代码移到循环外，避免重复执行。
4. 点击事件中添加e.preventDefault()，阻止a标签默认跳转行为。
5. 用$(this)获取当前点击的元素，确保稳定拿到data-embed属性。
6. 用$(function(){...})包裹代码，确保DOM加载完成后再执行，避免找不到元素的问题。

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