Question

我正在努力让这个插件工作：https://gopalraju.github.io/gridtab/#features。这是我正在使用的测试网站：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，它会正常工作

看看这个scrrenshot

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网站上工作

2 个答案: