Question

我只想在Web应用程序中使用外部js文件。我不想更改更多代码。但是导入后，我运行我的应用程序并遇到以下错误：

TypeError: Cannot read property 'fn' of undefined
    at owl.carousel.min.js:1
    at owl.carousel.min.js:1

Uncaught ReferenceError: $ is not defined
    at theme-scripts.js:1

我的HTML文件就是这样：

<html>
<body>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="src/app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="src/app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="src/app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="src/app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="src/app/components/landing-page/js/imageComparisonSlider.js"></script>
<script type="module" src="src/app/components/landing-page/js/bootstrap.min.js"></script>
<script>
  /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
  initComparisons();
</script>

</html>

外部theme-script.js文件：

$(window).scroll(function () {
  if ($(document).scrollTop() > 150) {
    $('.navbar').addClass('navbar-shrink');
  }
  else {
    $('.navbar').removeClass('navbar-shrink');
  }
});

$(function () {
  $('a[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

// Owl carousel
$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  dots: false,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

// hide #back-top first
$("#back-top").hide();

// fade in #back-top

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
  } else {
    $('#back-top').fadeOut();
  }
});

// scroll body to 0px on click
$('#back-top a').on("click", function () {
  $('body,html').animate({
    scrollTop: 0
  }, 800);
  return false;
});

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function () {
  $('.navbar-toggle:visible').click();
});

我不知道，这是导入外部js的正确方法吗？其次，如何使用来自外部js文件的功能，在本例中为initComparisons（）此函数。

也许有人有什么想法？

最好的问候，

狮子座

通过在Angular Web应用程序中导入外部JS文件无法正常工作

0 个答案: