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

Question

我正在使用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>

使用'jQuery'的不同别名：

var j = jQuery.noConflict();

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

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