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

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

你在 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
                }
            }]
        });
        });