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

Question

我的 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>

如果能帮助我朝着正确的方向前进，我们将不胜感激。

Answer 1

iframe 不是 .vma_overlay 的父元素，这就是为什么 closest() 找不到它的原因，它是一个“兄弟”元素，因此您可以使用 jQuery <强> siblings() 方法如:

 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>