如果在此页面上使用，则仅加载 flexslider 类型

Question

我在我的网站上使用了 2 个不同的滑块。其中一个滑块仅在几个页面上使用，因此在未使用它的页面上，我在控制台中收到一条错误消息：

TypeError: flexslider is undefined

如果此特定页面上未使用这种类型的 flexslider，我该如何让它忽略它？

这是必须始终显示的滑块：

 $('.bannerflexslider').flexslider({
    animation: "fade",
    controlNav: false,
    directionNav: false,
    slideshowSpeed: 5000,
    animationSpeed: 600, 
    touch: true,  
    start: function(slider){
      $('body').removeClass('loading');
    }
  });`

这是只能在某些页面上显示的滑块：

$('.subpageslide').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    slideshow: true,
    slideshowSpeed: 4000,
    animationSpeed: 600,
    itemWidth:  263,
    margin: 5,
    touch: true, 
    start: function(slider){
      $('body').removeClass('loading');
    }
  });

关于一些上下文，这是一个 wordpress 站点，此代码位于 js 文件夹的 script.js 中。

我尝试使用此页面评论中 Rob Bennet 的建议，但它使我的子页面幻灯片完全无效，即使在本应使用它的页面上也是如此。

https://css-tricks.com/snippets/javascript/check-if-function-exists-before-calling/

Answer 1

您可以放入一个简单的条件语句，在创建 flexslider 之前检查该元素是否存在于页面上。

if($('.subpageslide').length) {
    $('.subpageslide').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: false,
        slideshow: true,
        slideshowSpeed: 4000,
        animationSpeed: 600,
        itemWidth:  263,
        margin: 5,
        touch: true, 
        start: function(slider){
          $('body').removeClass('loading');
        }
    });
}

如果在此页面上使用，则仅加载 flexslider 类型

Only load flexslider type if used on this page

javascript

wordpress

flexslider