时间戳

首页 > 解决方案 > 单击 css 类后，获取最近 iframe 的 src

jquery - 单击 css 类后，获取最近 iframe 的 src

问题描述

我的 HTML 中有多个嵌入的 youtube 视频，因此当用户单击 CSS 类时，.vma_overlay我想获取最近 iframe 的 src。

我尝试了以下方法，但它不起作用：

$(".vma_overlay").click(function() {
  data = $(event.target).closest('.vma_iFramePopup').attr("src");
  
  console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class=" ">
  <div class="container">
    <div class="row">
      <div class="sizer" style="width:100%">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item vma_iFramePopup" src="https://www.youtube.com/embed/w5ln_-A3aw0?enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A57299" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" data-gtm-yt-inspected-9256558_25="true"
            id="874685300"></iframe>
          <div class="vma_overlay visible-lg" data-toggle="modal" data-target="#vma_ModalBox"></div>
        </div>
      </div>
    </div>
  </div>
</section>

任何能将我推向正确方向的帮助将不胜感激。

标签： jqueryhtmlcss

解决方案

.vma_overlayiframe 不是为什么closest()找不到它的父元素，而是“兄弟”，因此您可以使用 jQuerysiblings()方法，例如：

 data = $(event.target).siblings('.vma_iFramePopup').attr("src");


$(".vma_overlay").click(function() {
  data = $(event.target).siblings('.vma_iFramePopup').attr("src");
  console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class=" ">
  <div class="container">
    <div class="row">
      <div class="sizer" style="width:100%">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item vma_iFramePopup" src="https://www.youtube.com/embed/w5ln_-A3aw0?enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A57299" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" data-gtm-yt-inspected-9256558_25="true"
            id="874685300"></iframe>
          <div class="vma_overlay visible-lg" data-toggle="modal" data-target="#vma_ModalBox">CLICK ME</div>
        </div>
      </div>
    </div>
  </div>
</section>

推荐阅读