How to use conflict in html ? with multiple version jquery

问题

Is that possible that use 2 different jquery in a html page? I found some blog said that using conflict. But i try to add in but no luck. Anyone can help me out here?

Here is my code : Product slider

<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
<script src="assets/js/jquery-1.9.1.min.js"></script> 
<script src="owl-carousel/owl.carousel.js"></script>
<script src="js/lightbox.js"></script>
    <style>
#owl-demo .item{
    margin: 3px;
}
#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}
</style>
 <script>
$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: 3000,
    items : 4,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [979,3]
  });

});
</script>

Slideshow

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>


<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
<script src="sliderengine/initslider-1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

回答1:

If you want to use multiple version of jQuery ,try the following solution mate.. :)

<!-- load jQuery 2.2.1 -->
<script type="text/javascript" src="jquery-2.2.1.js"></script>
<script type="text/javascript">
var jQuery221 = $.noConflict(true);
</script>

<!-- load jQuery 1.10 -->
<script type="text/javascript" src="jquery-1.10.js"></script>
<script type="text/javascript">
var jQuery110 = $.noConflict(true);
</script>

Then use the appropriate version of the jquery variable to call the desired plugin.Hope that gives u an idea mate.. :)

Modify your resources as follows

<!-- jQuery for Product slider -->
<script src="assets/js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
   var jQuery191 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- jQuery for Product slider -->
<script src="sliderengine/jquery.js"></script>
<script type="text/javascript">
   var jQuerySlideshow = $.noConflict(true);
</script>
<!-- Product slider -->
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<script src="js/lightbox.js"></script>

<!-- Slideshow -->

<script type="text/javascript" src="js/scripts.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

来源：https://stackoverflow.com/questions/28403189/how-to-use-conflict-in-html-with-multiple-version-jquery

标签

jquery

html

css

conflict