Question

我正在使用Wordpress，在我的主题的顶部，我按此顺序拥有这些脚本。 jquery.js - cycle2.js - header_scripts.js - lightbox.js

我要做的是连接灯箱和cycle2插件，这样当你按下灯箱上的next / prev时，幻灯片将在cycle2上改变。这段代码就是这样。

$('body').on('lightboxNext', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    if (index > $(slideshow).data("cycle.opts").slideCount) {
        return;
    }
    $(slideshow).cycle("goto", index + 1);
});

$('body').on('lightboxPrev', function() {
    var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
    var index = $(slideshow).data("cycle.opts").currSlide;
    $(slideshow).cycle("goto", index - 1);
});

请注意。 lightboxNext / Prev在灯箱脚本中添加如下。

this.$lightbox.find('.lb-prev').on('click', function() {
  $('body').trigger('lightboxPrev');
  // ...
});

如果将此代码放入Wordpress循环中，则可以正常运行。但是，代码不能保留在那里，因为如果有多个帖子，则会多次触发监听器而不是一次。

我尝试将代码移到header_scripts.js中。代码不会执行。以下代码已添加到header_scripts.js

$(document).ready(function() {

    console.log('document ready');

    $('body').on('click', function() {
        console.log('body clicked');
    })

    $('body').on('lightboxNext', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        if (index > $(slideshow).data("cycle.opts").slideCount) {
            return;
        }
        $(slideshow).cycle("goto", index + 1);
    });

    $('body').on('lightboxPrev', function() {
        var slideshow = '.cycle-'+$('body').data('lightbox-slideshow');
        var index = $(slideshow).data("cycle.opts").currSlide;
        $(slideshow).cycle("goto", index - 1);
    });
});

加载页面并单击正文我在控制台中收到以下内容：

准备好文件

正文点击

然而，lightboxNext / Prev侦听器不会触发。为什么呢？

我也尝试将此代码添加到页面底部。也不起作用。由于某种原因，代码仅在Wordpress循环中有效。任何帮助都将非常感激。

JavaScript侦听器不会触发

0 个答案: