Question

我正在尝试整理内联js脚本以获取我正在修改的模板，并在我注意到控制台中的某些错误时将它们组合到外部js文件中。它们对网站的功能没有任何损害，但我想知道我做错了什么以及如何解决它。

我的外部js文件是：

<script type="text/javascript" src="web/js/init.js"></script>

Link 1会抛出以下错误：

Uncaught TypeError: Object [object Object] has no method 'owlCarousel'

（我不在那个页面上使用那个carousal ......）

Link 2我使用carousal抛出此错误：

Uncaught TypeError: Object [object Object] has no method 'nivoSlider'

（我不使用该页面上的滑块）

Link 3我保留了内联脚本（没有外部js文件），没有与外部/内部js相关的js错误。

谢谢！

Answer 1

您正在致电nivoslider()并且未使用其js file来解释为什么您会收到nivoslider的错误，请从init.js puppies page

$(window).load(function() {
   $('#slider').nivoSlider();
});

与您相同的问题owlcarousel从您的index page

中移除init.js的以下代码

$("#owl-example").owlCarousel({
    autoPlay: 3000, //Set AutoPlay to 3 seconds
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [979,3]
});

如果您的id slider和owl-example仅用于nivoslider和owlCarousel，那么您可以通过检查元素的长度来完成，

$(function() {
   if($('#slider') && $('#slider').length){// must be on puppies page only
       $('#slider').nivoSlider();
   }
   if($('#owl-example') && $('#owl-example').length){// must be on index page only
      $("#owl-example").owlCarousel({
         autoPlay: 3000, //Set AutoPlay to 3 seconds
         items : 3,
         itemsDesktop : [1199,3],
         itemsDesktopSmall : [979,3]
      });
   }
});

Answer 2

1）您的目标是页面上不存在的元素。没有ID为owl-example的元素，因此jquery不返回任何内容，并且在此null值上调用方法。（参见here on SO如何首先测试null）

2）与上述相同，但ID为slider的元素。它在此页面上不存在，因此在null上调用方法。

您的代码看起来像

$(function(){
  //Code..
})

当DOM加载时，这些函数都被调用。请参阅this SO question。

3）您没有在此页面上收到错误，因为您使用的jquery选择器返回匹配的页面中的元素。这与内联/外部没有任何关系。

将内联js移动到外部js文件中导致错误

2 个答案: