为啥我的fancybox 没有在$('.selector').click() 上打开？

Posted 2023-05-09

【中文标题】为啥我的fancybox 没有在$(\'.selector\').click() 上打开？

【英文标题】：Why does my fancybox not open on $('.selector').click()?为什么我的fancybox 没有在$('.selector').click() 上打开？

【发布时间】：2020-02-02 21:57:56

【问题描述】：

我有一个样式链接页面，我使用 jQuery 将其分成多个部分。

使用 jQuery .internal 会使页面导航到用户单击的 div 内链接的 href 属性指定的指定目标。 .external 与 .internal 的作用相同，只是它在新标签页中打开。 .video 应该简单地导致单击的 div 播放由fancybox 中的链接指定的视频，但事实并非如此。也不会在控制台报错。

这是我的fancybox代码：

HTML

<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
    <div class="box listed-left animated-content move_right animate clearfix">
        <div class="box-text">
            <h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
        </div>
    </div>
</div>    

jQuery

$('.video').click(function()
    $().fancybox(
        selector : '.video'
    );
);

我的页面标题中也有这两个资源

【问题讨论】：

经过fancyapps.com/fancybox/3/docs/#api，打开fancybox的API命令似乎是$.fancybox.open

这更近了一步。它确实会在单击 div 时打开 fancybox，但它不会播放 div 内的链接指定的视频。

【参考方案1】：

你可以像这样初始化fancybox

$('.video').fancybox(
    selector : '.video'
);

或者正如@Taplar所说的

$('.video').click(function()
    $.fancybox.open(this)
);

【讨论】：

我使用@Taplar 建议的一个版本让它工作。我可以编辑你的答案来显示它吗？

【参考方案2】：

稍微解释一下您的代码的作用：

$('.video').click(function() // <- Here you are attaching your click event on selected items
    // So, when user clicks, this happens:
    $().fancybox( // Here you are telling fancybox to attach click event ..
        selector : '.video'  // .. on this selector
    );
);

所以，基本上你做了太多的工作，你所要做的就是删除你自己的点击事件，它应该可以正常工作。或者您可以使用 API 以编程方式启动 fancybox，就像在另一个答案中一样。