Question

我编写了以下脚本来重置Iframe源，删除一个类（.play）并在单击.b-close时添加一个图像占位符。我得到了它的工作，但问题是我有多个模态，我只想影响点击的模态。我想我应该使用＆＃39; $（this）＆＃39; DOM元素才能实现这一点。

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

这是我要打电话的模态。请记住，会有多个模态，所以我只想影响点击的模式

<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

问题出在你的$('.pretty-embed')选择器中，它选择所有模态中的所有嵌入元素如果我正确理解你的问题。要修复它，请将模态的id添加到下面的选择器中：

(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();
    });
});

此外，您可以使用与前一行相同的方式：

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

Answer 2

您可以使用

获取当前模态

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

然后删除课程play，并添加如下图片：

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

请参阅此jsfiddle

中的完整代码

我怎样才能正确使用＆＃39; $（this）＆＃39;调用触发事件的DOM元素？

2 个答案: