javascript - 仅加载在此页面上使用的 flexslider 类型

Question

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

TypeError: flexslider is undefined

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

这是必须始终显示的 slider :

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

这是只能在某些页面上显示的 slider :

$('.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');
        }
    });
}