javascript - 函数在第二次单击之前不打开弹出窗口

Question

我在 laravel 环境中使用 magnific popup 并希望两者一起工作，所以我写了这个:

Here's a fiddle with the problem

$(document).ready(function() {

    $('.image-popup-vertical-fit').on('click',function(){
    var image = $(this).attr('src');

    popnow(image);
});

    function popnow(a) {

    $('.image-popup-vertical-fit').magnificPopup({

        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        },
        items: {
        src: a
            }

    });
}
    });

HTML:

<div class="col-lg-6 col-sm-6 margin-top-60">
    {{HTML::image('images/recentprojects1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>

<div class="col-lg-6 col-sm-6 margin-top-60" id="test">
    {{ HTML::image('images/pricing1.png','recent',array('class' => 'img-responsive img-center image-popup-vertical-fit')) }}
</div>

如果我在页面重新加载后第一次单击弹出式打开图像，则没有任何反应，如果我第二次单击它打开。

但是当我在页面重新加载后第一次点击第一个 div 并且之后我点击第二个时，它仍然显示第一次点击的 div 的内容(在第一次点击第二个 div - 错误的图像).

所以它似乎不会在每次点击时都采用 var image。我的功能有问题吗？

当我将 console.log(a) 添加到 function popnow(a) 的顶部时，会记录正确的图像 src。

Answer 1

只需迭代每张图片并为​​每张图片添加魔法。然后，您只需单击每张图片即可打开弹出窗口。

Working fiddle

function popnow(){
  $('.image-popup-vertical-fit').each(function(){
    var image = $(this).attr('src');
    $(this).magnificPopup({

        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        },
        items: {
            src: image
        }
      });
   });
}
 // Init function
  popnow();

PS:我已经使用了来自 CDN 的插件。使用 jsfiddle 时，请尝试从 CDN 而不是工作区加载插件或库。