使用放大弹出窗口的图像库总是弹出第一个，而不是单击时选择的那个

Question

我在 django 项目中使用 JQUERY 和 Magnific Popup。当我单击图库中的任何图像时，它总是弹出第一张图像而不是所选的图像。这是我当前的代码：

这是 django 模板

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
{% for image in images %}
  <div class="image">
    <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}">
      {% thumbnail MEDIA_ROOT|add:"images/"|add:dir|add:"/"|add:image 300x300 crop="smart" as im %}
      <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}" class="image-link">
        <img src="{{ im.url }}">
      </a>
    </a>
    <div class="info">
      <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }} " class="title" >
        {{ dir }}
      </a>
    </div>
  </div>
{% endfor %}

这是 javascript 和放大的弹出窗口

<script>
  $(document).ready(function()  { 
   $(document).on('click', '.image-link',function(e) {
       e.preventDefault(); 
       $('.image-link').magnificPopup({
           type: 'image',
           closeOnContentClick: true,
           closeBtnInside: true,
           midClick: true,
           mainClass: 'mfp-with-zoom mfp-img-mobile',
           gallery: {
               enabled: true,
               navigateByImgClick: true,
               preload: [0,1] // Will preload 0 - before current, and 1 after the current image
           },
           image: {
             verticalFit: true,
           },
           zoom: {
             enabled: true
           },
           callbacks: {
              beforeOpen: function() {

              }
            },     
       }).magnificPopup('open');
   });
  });
 </script>

Answer 1

na chamada da funcao do click，利用 o e.target para pegar o elemento clicado