使用多个jQuery版本以及一个jQuery脚本的多个版本

Question

Iam工作在codeigniter PHP上，并尝试使用jquery制作一个漂亮的视图，但我使用的是不同版本的jquery，因为您都知道这会产生很多问题。特别是第一部分是为一个jQuery函数使用多个版本。我已经试过这Inclusion of more than two JQuery libraries creates problems可以在任何一个导向

第一部分是使用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />  
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
    <script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script> 
     <script> 
     $(function() { 
      var selectBox = $("select").selectBoxIt(); 
     }); 
     </script> 

和其他部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script> 
<script src="http://liveurl.ainetworks.de/demo/jquery.liveurl.js"> </script> 
        <script> 

      var curImages = new Array(); 
      $('textarea').liveUrl({ 
       loadStart : function(){ 
        $('.liveurl-loader').show(); 
       }, 
       loadEnd : function(){ 
        $('.liveurl-loader').hide(); 
       }, 
       success : function(data) 
       {       
        var output = $('.liveurl'); 
        output.find('.title').text(data.title); 
        output.find('.description').text(data.description); 
        output.find('.url').text(data.url); 
        output.find('.image').empty(); 

        output.find('.close').one('click', function() 
        { 
         var liveUrl  = $(this).parent(); 
         liveUrl.hide('fast'); 
         liveUrl.find('.video').html('').hide(); 
         liveUrl.find('.image').html(''); 
         liveUrl.find('.controls .prev').addClass('inactive'); 
         liveUrl.find('.controls .next').addClass('inactive'); 
         liveUrl.find('.thumbnail').hide(); 
         liveUrl.find('.image').hide(); 

         $('textarea').trigger('clear'); 
         curImages = new Array(); 
        }); 

        output.show('fast'); 

        if (data.video != null) {      
         var ratioW  = data.video.width /350; 
         data.video.width = 350; 
         data.video.height = data.video.height/ratioW; 

         var video = 
         '<object width="' + data.video.width + '" height="' + data.video.height + '">' + 
          '<param name="movie"' + 
            'value="' + data.video.file + '"></param>' + 
          '<param name="allowScriptAccess" value="always"></param>' + 
          '<embed src="' + data.video.file + '"' + 
            'type="application/x-shockwave-flash"' + 
            'allowscriptaccess="always"' + 
            'width="' + data.video.width + '" height="' + data.video.height + '"></embed>' + 
         '</object>'; 
         output.find('.video').html(video).show(); 


        } 
       }, 
       addImage : function(image) 
       { 
        var output = $('.liveurl'); 
        var jqImage = $(image); 
        jqImage.attr('alt', 'Preview'); 

        if ((image.width/image.height) > 7 
        || (image.height/image.width) > 4) { 
         // we dont want extra large images... 
         return false; 
        } 

        curImages.push(jqImage.attr('src')); 
        output.find('.image').append(jqImage); 


        if (curImages.length == 1) { 
         // first image... 

         output.find('.thumbnail .current').text('1'); 
         output.find('.thumbnail').show(); 
         output.find('.image').show(); 
         jqImage.addClass('active'); 

        } 

        if (curImages.length == 2) { 
         output.find('.controls .next').removeClass('inactive'); 
        } 

        output.find('.thumbnail .max').text(curImages.length); 
       } 
      }); 


      $('.liveurl ').on('click', '.controls .button', function() 
      { 
       var self  = $(this); 
       var liveUrl  = $(this).parents('.liveurl'); 
       var content  = liveUrl.find('.image'); 
       var images  = $('img', content); 
       var activeImage = $('img.active', content); 

       if (self.hasClass('next')) 
        var elem = activeImage.next("img"); 
       else var elem = activeImage.prev("img"); 

       if (elem.length > 0) { 
        activeImage.removeClass('active'); 
        elem.addClass('active'); 
        liveUrl.find('.thumbnail .current').text(elem.index() +1); 

        if (elem.index() +1 == images.length || elem.index()+1 == 1) { 
         self.addClass('inactive'); 
        } 
       } 

       if (self.hasClass('next')) 
        var other = elem.prev("img"); 
       else var other = elem.next("img"); 

       if (other.length > 0) { 
        if (self.hasClass('next')) 
          self.prev().removeClass('inactive'); 
        else self.next().removeClass('inactive'); 
       } else { 
        if (self.hasClass('next')) 
          self.prev().addClass('inactive'); 
        else self.next().addClass('inactive'); 
       } 



      }); 
     </script> 

Answer 1

不推荐这种做法，你可以的jQuery jQuery的文档中看到的.noConflict（），但在这种情况下有一个解决方案。

http://api.jquery.com/jQuery.noConflict/

<script src="other_lib.js"></script> 
<script src="jquery.js"></script> 
<script> 
$.noConflict(); 
// Code that uses other library's $ can follow here. 
</script> 

使用不同的别名insted的 'jQuery的' 的：

var j = jQuery.noConflict(); 

// Do something with jQuery 
j("div p").hide(); 

// Do something with another library's $() 
$("content").style.display = "none";