Etkinliği tetikleyen bir DOM öğesini çağırmak için '$ (this)' öğesini doğru şekilde nasıl kullanabilirim? Ben <p></p> Yani Iframe Kaynak sıfırlar aşağıdaki senaryoyu yazdım "(bu) $" DOM ​​kullanarak olayları tetikleyen yeni olduğum için

Question

benimle çıplak Lütfen bir sınıf (.play) kaldırır ve bir resim ekler .b-kapat tıklandığında yer tutucu. Çalışmaya başladım ama sorun şu ki birden fazla modele sahip olmak ve sadece tıklanan modelini etkilemek istiyorum. Bunu başarmak için '$ (this)' DOM öğesini kullanmam gerektiğini düşündüm.

<script> 

    (function($){ 

    var ivid = $('.pretty-embed iframe').attr('src'); 

    $(document).ready(function() { 

      $(".b-close").click(function(e){ 
      e.preventDefault(); 
      var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid'); 
      var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg"; 
      var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">'; 
      $('.pretty-embed').removeClass('play').empty(); 
      $('.pretty-embed').html(vidImgUrl); 
      $('.b-modal').click(); /// Just trying to close modal..... $.modal.close(); 
    }); 
    }); 

})(jQuery); 

</script> 

Arayacağım Modal İşte. Birden modals olacağı unutmayın, bu yüzden sadece tıklandığında kalıcı etkiler istiyorum

Doğru sorununuzu anlasalardı tüm kipliklerin tüm embed elemanlarını seçer Sorun $('.pretty-embed') selektör içindedir

<div id="element_to_pop_up" display: block;"> 
    <a class="b-close">x</a> 
    <h3 class="pop-hd">Header</h3> 
    <p>Test Video</p> 
    <div class="pretty-embed play" data-pe-allow-fullscreen="false"> 
    <iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&amp;rel=1"></iframe> 
    </div> 
</div> 

Answer 1

.

$(this).parent().find('.pretty-embed').removeClass('play').empty(); 

Answer 2

Sen alabilirsiniz:

(function($){ 

    var ivid = $('.pretty-embed iframe').attr('src'); 

    $(document).ready(function() { 

     $(".b-close").click(function(e){ 
     e.preventDefault(); 
     var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid'); 
     var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg"; 
     var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">'; 
     var parent_id = $(this).parent().attr(id); 
     // Prepend the parent id before the .pretty-embed selector 
     $('#'+parent_id+' .pretty-embed').removeClass('play').empty(); 
     $('#'+parent_id+' .pretty-embed').html(vidImgUrl); 
     $('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close(); 
    }); 
}); 

Ayrıca önceki satırlarda yaptım aynı şekilde kullanabilirsiniz: o modal kimliği alıp aşağıda gibi seçicileri onu prepend düzeltmek için

var current_modal = $(this).parent().find('.pretty-embed'); 

ile cari modal Sonra sınıf play kaldırmak ve bu gibi görüntü ekleyin:

current_modal.removeClass('play').empty(); 
current_modal.html(vidImgUrl); 

Bu ürüne ait tam kodunuza bakın: jsfiddle