Еще одна конфликтующая проблема JQuery

Question

Я нашел множество ответов (большинство из которых касаются WordPress), но ничего, что вполне помогает. Я новичок в css / jquery, поэтому мне нужно немного подержать. Я пробовал это, но не смог заставить его работать Могу ли я использовать несколько версий jQuery на одной странице?

Мой код здесь:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav();
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    var jQuery_1_7_2 = $.noConflict(true);
</script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')     
</script>

<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  var jQuery_1_9_1 = $.noConflict(true);
</script> 
<script src="js/owl.carousel.js"></script>

Я использовал исходный код для двух элементов на моей странице, один из которых вызывает jquery-1.7.2.min.js, а другой - jquery-1.9.1.min.js.

1.7.2 управляет моей отзывчивой панелью навигации, в то время как 1.9.1 используется каруселью изображений. На данный момент версия карусели отменяет навигационную панель (исчезает).

Любые идеи, как я могу решить этот конфликт?

Answer 1

Предполагая, что нужны разные версии, и плагины написаны по правильному шаблону, не используйте noConflict, но просто расположите сценарии так, чтобы плагины имели доступ к нужнымwindow.jQueryкогда они будут выполнены.

<script src="js/jquery-1.7.2.min.js"></script>
<!-- plugins that "only work with" 1.7.2: $/jQuery refer to 1.7.2 -->
<script src="js/jquery.slicknav.js"></script>

<script src="js/jquery-1.9.1.min.js"></script>
<!-- everything else: $/jQuery refer to 1.9.1 (but consider 1.11+) -->
<script src="js/owl.carousel.js"></script>

Использование присвоения другого имени с помощью noConflict заключается в том, что код, которыйзнает о другом имени, может использовать его - что не относится к стандартному плагину.

Тем не менее, рассмотрите возможность использования последней версии 1.x (в настоящее время 1.11.1) длявсех плагинов, поскольку jQuery очень обратно совместим с несколькими неожиданными изменениями (схема устаревания длинная). В тех случаях, когда используются устаревшие функции, существуетjquery-migrate.js для подбора изменений для более старого кода, который может устранить многие такие проблемы миграции.

[jQuery-migrate] может использоваться для обнаружения и восстановления API или функций, которые устарели в jQuery и удалены с версии 1.9.

Answer 2

Рабочий код с использованием 1.9.1. Будем экспериментировать с 1.11

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $('#menu').slicknav();
   });
</script>
<script src="js/owl.carousel.js"></script>