JQuery 在 wordpress 中使用 NextGen Gallery 插件播放运行幻灯片时出错

Question

我在 NextGen Gallary 插件中添加幻灯片后 Chrome 中的错误代码。 Sildeshow 页面中的错误部分？我找不到这个页面.. 在页脚附上 jQuery i link。这与我的 jQuery 文件有冲突吗？

请看附件图片和代码screenshot of error

JQMIGRATE: Migrate is installed, version 1.4.1
slideshow:212 Uncaught TypeError: jQuery(...).nggShowSlideshow is not a function
    at HTMLDocument.<anonymous> (slideshow:212)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ slideshow:212
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2

<script type="text/javascript">
jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
jQuery(function($) {
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
        id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
        fx: 'fade',
        width: 1000,
        height: 600,
        domain: 'https://localhost/marc1/',
        timeout: 10000      });

<script type="text/javascript">
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
    jQuery(function($) {
        jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
            id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
            fx: 'fade',
            width: 1000,
            height: 600,
            domain: 'https://localhost/marc1/',
            timeout: 10000      });

Answer 1

这种类型的错误通常是因为 JQuery 插件（脚本）在 JQuery 本身被加载之前运行。从您的屏幕截图来看，您似乎已将脚本直接手动添加到您的页面模板中。

在 WordPress JQuery 中，脚本应始终由 wp_enqueue_script 挂钩加载并设置 JQuery 依赖项。

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

例如：

function load_my_script_SO44497195(){
    wp_register_script( 
        'my_script', 
        get_template_directory_uri() . '/js/myscript.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script_SO44497195');

但是，如果您确实必须通过 html 手动加载脚本，则应将此代码包装在

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

或者至少将您的脚本放在页脚中，以便 JQuery 有机会首先加载。但是，您实际上应该只对脚本进行排队。

所有这些都是猜测，因为我只有你的屏幕截图可以关闭。如果我们可以访问实时站点，那就容易多了。

此外，在您在问题中提供的代码块中，您加载了两次相同的脚本，而且都没有结束脚本标记 </script>，这似乎不仅没有必要，而且可能会导致问题.先两次解决这个问题，因为它很可能是问题的根源。

JQuery 在 wordpress 中使用 NextGen Gallery 插件播放运行幻灯片时出错

JQuery error when run slideshow with NextGen Gallery plugin in wordpress

javascript

jquery

wordpress

nextgen-gallery

JQuery 在 wordpress 中使用 NextGen Gallery 插件播放 运行 幻灯片时出错

JQuery error when run slideshow with NextGen Gallery plugin in wordpress

javascript

jquery

wordpress

nextgen-gallery

JQuery 在 wordpress 中使用 NextGen Gallery 插件播放运行幻灯片时出错