Question

我有codepen这样可以正常使用，但当我将其加载到Wordpress site时，它似乎无法正常运行。

这是JS代码：

jQuery(document).ready(function() {
(function(jQuery, win) {
    jQuery.fn.inViewport = function(cb) {
        return this.each(function(i, el) {
            function visPx() {
                var H = jQuery(this).height(),
                    r = el.getBoundingClientRect(),
                    t = r.top,
                    b = r.bottom;
                return cb.call(el, Math.max(0, t > 0 ? H - t : b < H ? b : H));
            }
            visPx();
            jQuery(win).on("resize scroll", visPx);
        });
    };
})(jQuery, window);

jQuery(".kk-img").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);
});

jQuery(".kk-rec").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);
});
});

此外，开发工具控制台显示没有错误。任何人都知道我应该在哪里寻找解决这个问题的方法？

感谢您的时间。

---更多澄清---

JS代码在视口上可见时，会在某些元素上添加一个类。然后这些元素有一些转换，以便它们可以顺利显示（您可以检查代码链上的代码）。

在我的网站上，它“无法正常工作”，因为根本没有在元素上添加addClass。我不知道为什么......

Answer 1

您的main.js根本没有加载！
您可以查看代码的来源，Ctrl + U或右键单击并查看页面源其他JS脚本已加载 main.js的路径为/js，我认为您必须将其放入/assets/js中再看一下你的enqueue功能。你可以把它贴在这里 SYA

脚本在Codepen上正常工作，但在WP站点上没有

1 个答案: