1
votes

Après avoir cliqué sur la classe css, obtenez le src de l'iframe le plus proche

J'ai plusieurs vidéos youtube intégrées dans mon HTML, donc lorsque l'utilisateur clique sur la classe CSS .vma_overlay je veux obtenir le src de l'iframe le plus proche.

J'ai essayé ce qui suit mais cela ne fonctionne pas:

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

$(".vma_overlay").click(function() {
  data = $(event.target).closest('.vma_iFramePopup').attr("src");
  
  console.log(data);
});

Toute aide pour me pousser dans la bonne direction serait vraiment appréciée.

jquery html css

0 commentaires

3 Réponses :

0
votes

le plus proche ne fonctionnera pas ici:

Description: Pour chaque élément de l'ensemble, obtenez le premier élément qui correspond au sélecteur en testant l'élément lui-même et en parcourant ses ancêtres dans l'arborescence DOM.

essayez siblings () https://api.jquery.com/siblings /

0 commentaires

1
votes

L'iframe n'est pas un élément parent de .vma_overlay c'est pourquoi plus proche () ne le trouvera pas, c'est un "frère" à la place, vous pouvez donc utiliser jQuery siblings () méthode comme: XXX

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

$(".vma_overlay").click(function() {
  data = $(event.target).siblings('.vma_iFramePopup').attr("src");
  console.log(data);
});

1 commentaires

Merci beaucoup, de toute évidence, je n'ai pas compris ce qui est le plus proche.

0
votes

Vous pouvez essayer

$(".vma_overlay").click(function (event) {
    data = $(event.target).parent().find('iframe.vma_iFramePopup').attr("src"); 
    console.log(data);
});

0 commentaires