前端之家

  1. 首页
  2. 问答

循环中的多个Magnific弹出框仅显示最后一项的内容

• 问答

我正在使用此功能通过Magnific Popup在灯箱中显示youtube视频。我得到id个链接中的.video-youtube个，为任何链接创建了一个动态iframe。

在此页面中，我有3个不同的链接，问题是灯箱仅显示最后一个视频，而不是根据单击的链接进行动态更改。任何提示将不胜感激。

<a id="siTrd7uucW" class="video-youtube" href="#">Click to view video</a>
<a id="reFad8ug77" class="video-youtube" href="#">Click to view video</a>
<a id="sghrd7tu99" class="video-youtube" href="#">Click to view video</a>

(function($) {
  $(document).ready(function() {
    $(".video-youtube").each(function() {
      var id = this.id;
      $(window).load(function() {
        $('.video-youtube').magnificPopup({
          items: {
            src: $('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'),type: 'inline'
          }
        });
      });
    });
  });
})(jQuery);
bilong1988 回答：循环中的多个Magnific弹出框仅显示最后一项的内容

首先，window.load不是必需的。您正在运行document.ready处理程序，因此window.load已被解雇。

关于此问题，是因为您要选择循环中的所有$('.video-youtube')元素。使用$(this)来仅引用当前实例：

(function($) {
  $(function() {
    $(".video-youtube").each(function() {
      $(this).magnificPopup({
        items: {
          src: $('<iframe src="https://www.youtube.com/embed/' + this.id + '?autoplay=1" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'),type: 'inline'
        }
      });
    });
  });
})(jQuery);
jquerymagnific-popup
本文链接：https://www.f2er.com/2373255.html

大家都在问