MagnificPopup报错：无法读取undefined的'className'属性

我复刻了一个Magnific Popup画廊，操作步骤和原示例完全一致，但控制台抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'className')

无法定位问题，想知道是需要手动声明变量，还是Magnific Popup引入有问题？

原代码如下：

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="popup-gallery">
      <a href="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" class="image" title="Some Text for the image">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" alt="Alt text" />
      </a>
      <a href="https://www.youtube.com/watch?v=L0jQz6jqQS0" class="video" title="This is a video">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/2.jpg" alt="Alt text" />
      </a>
      <a href="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" class="image" title="Some Text for the image">
        <img src="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" alt="Alt text" />
      </a>
    </div>
  </div>
</div>

CSS代码 #

.popup-gallery a {
  display: inline-block;
  width: 25%;
}
.popup-gallery a img {
  height: auto;
  width: 100%;
}

JS代码 #

$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    callbacks: {
      elementParse: function(item) {
        if (item.el.context.className == 'video') {
          item.type = 'iframe',
          item.iframe = {
            patterns: {
              youtube: {
                index: 'youtube.com/',
                id: 'v=',
                src: '//www.youtube.com/embed/%id%?autoplay=1'
              },
              vimeo: {
                index: 'vimeo.com/',
                id: '/',
                src: '//player.vimeo.com/video/%id%?autoplay=1'
              },
              gmaps: {
                index: '//maps.google.',
                src: '%id%&output=embed'
              }
            }
          }
        } else {
          item.type = 'image',
          item.tLoading = 'Loading image #%curr%...',
          item.mainClass = 'mfp-img-mobile',
          item.image = {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
          }
        }
      }
    },
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    }
  });
});

问题原因与修复方案 #

错误根源是elementParse回调里的item.el.context——在当前使用的Magnific Popup版本中，item.el本身就是jQuery包装后的DOM对象，context属性已不再被推荐使用或已移除，导致读取className时context为undefined，触发TypeError。

修复方案很简单：

1. 用jQuery的hasClass()方法替代直接读取DOM的className属性，更可靠且符合框架用法
2. 移除else分支中重复的item.type = 'image'（初始化时已设置默认type，无需重复赋值）

修正后的JS代码 #

$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    callbacks: {
      elementParse: function(item) {
        // 改用jQuery的hasClass判断元素类名
        if (item.el.hasClass('video')) {
          item.type = 'iframe';
          item.iframe = {
            patterns: {
              youtube: {
                index: 'youtube.com/',
                id: 'v=',
                src: '//www.youtube.com/embed/%id%?autoplay=1'
              },
              vimeo: {
                index: 'vimeo.com/',
                id: '/',
                src: '//player.vimeo.com/video/%id%?autoplay=1'
              },
              gmaps: {
                index: '//maps.google.',
                src: '%id%&output=embed'
              }
            }
          };
        } else {
          item.tLoading = 'Loading image #%curr%...';
          item.mainClass = 'mfp-img-mobile';
          item.image = {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
          };
        }
      }
    },
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    }
  });
});

另外，检查你的Magnific Popup引入是正常的，版本1.1.0是稳定版本，无需更换。

内容的提问来源于stack exchange，提问作者Hector