如何正确使用'$(这个）'以调用触发该事件的DOM元素

How can I properly use '$(this)' to call a DOM element that triggered the event?

本文关键字：调用 事件 元素 DOM 何正确 这个      更新时间：2023-09-26

我编写了以下脚本，该脚本重置Iframe Source，删除一个类（.play），并在单击.b-close时添加一个图像占位符。我已经开始工作了，但问题是我有多个模态，我只想影响被点击的模态。我想我应该使用"$（this）"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>

问题出在您的$('.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();

您可以使用获取当前模态

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

然后删除类play，并像这样添加您的图像：

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

在这个jsfiddle 中查看完整的代码

相关文章：