Question

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

TypeError：flexslider未定义

如果在这个特定的页面上没有使用这种类型的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类型

1 个答案: