Я просто хочу использовать внешние файлы 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>
external 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 () эта функция.
может быть, у кого-то есть идеи?
С наилучшими пожеланиями,
Лев