我正在尝试让 jquery 插件在我的 wordpress 网站上工作

Question

我正在尝试让这个插件工作：https://gopalraju.github.io/gridtab/#features . Here is the test site I am using: http://testing.bdanzer.com/。我通过 functions.php 文件对文件进行排队，并在 footer.php 中添加了脚本标签。他们在网站上排队显示，但 jquery 插件不工作？这是代码：

Functions.php 文件:

function bdanzer_scripts() {
    wp_enqueue_script( 'gridtabready.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtabready.js', array( 'jquery' ), '1.0.0', false );
    wp_enqueue_script( 'gridtab.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtab.min.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_style( 'gridtab.css', get_template_directory_uri() . '/bdanzer/gridtab/gridtab.min.css' );
}
add_action( 'wp_enqueue_scripts', 'bdanzer_scripts', 11);

Footer.php 文件:

<script>
      $(document).ready(function() {
          $('.gridtab-1').gridtab({
              grid: 6,
              tabPadding: 0,
              borderWidth: 10,
              contentPadding: 40,
              responsive: [{
                  breakpoint: 991,
                  settings: {
                      grid: 4,
                      contentPadding: 30
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 3,
                      contentPadding: 20
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 2
                  }
              }]
          });


          $('.gridtab-2').gridtab({
              grid: 4,
              config:{
                layout: 'tab'
              },
              callbacks: {
                  open: function() {
                      console.log('open');
                  },
                  close: function() {
                      console.log('close');
                  }
              },
              responsive: [{
                  breakpoint: 991,
                  settings: {

                      grid: 3,
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 2,
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 1,
                  }
              }]
          });
          $('.gridtab-3').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                showClose:true,
                showArrows:true,
              }
          });

          $('.gridtab-4').gridtab({
              grid: 6,
              tabPadding: 0,
              borderWidth: 10,
              contentPadding: 40,
              config:{
                scrollToTab:true,
                showClose:true,
                showArrows:true
              },
              responsive: [{
                  breakpoint: 991,
                  settings: {
                      grid: 4,
                      contentPadding: 30
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 3,
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 2
                  }
              }]
          });
          $('.gridtab-5').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                keepOpen:true,
                showClose:true,
                showArrows:true,
                scrollToTab:true,
              }
          });
          $('.gridtab-6').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                showClose:true,
                showArrows:true,
                scrollToTab:true,
              }
          });
      });
    </script>

Answer 1

检查您的 functions.php 文件，似乎您错误地将脚本加入队列。如果您查看测试页面的源代码（Chrome 中的 ctrl+u），您将看到以下脚本因此排队：

<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-content/themes/popperscores-master/bdanzer/gridtab/gridtabready.js?ver=1.0.0'></script>

首先，您的脚本类型为 type="text/rocketscript" 而不是 "text/javascript"。我不确定你打算通过那个实现什么。

其次，您在从服务器调用脚本文件时存在语法错误。您通过 data-rocketsrc='...' 而不是 src='...' 引用您的脚本您应该查看以这种方式引用的所有脚本。也许这将有助于解决问题。

Answer 2

您在 gridtabready.js 中有语法错误，您没有关闭 .ready 功能，请按如下所示替换这些 js，它会正常工作

看看这张截图

jQuery(document).ready(function() {

        jQuery('.gridtab-1').gridtab({
            grid: 4,
            tabPadding: 0,
            borderWidth: 10,
            contentPadding: 40,
            responsive: [{
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2,
                }
            }]
        });

        jQuery('.gridtab-2').gridtab({
            grid: 6,
            layout: 'tab',
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab'
            },
            responsive: [{
                breakpoint: 1024,
                settings: {
                    grid: 4,
                }
            }, {
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]
        });
        jQuery('.gridtab-3').gridtab({
            grid: 4,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 30
                }
            }]
        });
        jQuery('.gridtab-4').gridtab({
            grid: 6,
            borderWidth: 3,
            tabPadding: 0,
            contentPadding: 40,
            responsive: [{
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]

        });
        jQuery('.gridtab-5').gridtab({
            grid: 4,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1,
                keepOpen: true,
                showClose: true,
                showArrows: true,
                scrollToTab: true
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 30
                }
            }]
        });

        jQuery('.gridtab-6').gridtab({
            grid: 3,
            borderWidth: 3,
            tabPadding: 10,
            contentPadding: 40,
            config: {
                showClose: true,
                showArrows: true,
                layout: 'tab'
            },
            selectors: {
                tab: '.readmore',
                closeButton: '.closeBtn',
                nextArrow: '.nextBtn',
                prevArrow: '.prevBtn',
                disabledArrow: '.disabledBtn'
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 20
                }
            }, {
                breakpoint: 320,
                settings: {
                    grid: 1
                }
            }]

        });
        jQuery('.gridtab-7').gridtab({
            grid: 6,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1,
                rtl: true,
                showClose: true,
                showArrows: true
            },
            responsive: [{
                breakpoint: 1024,
                settings: {
                    grid: 4,
                }
            }, {
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]
        });
        });

我正在尝试让 jquery 插件在我的 wordpress 网站上工作

I am trying to get a jquery plug in to work on my wordpress site

javascript

php

wordpress

jquery

jquery-plugins