如何在同一页面上将插件用于不同版本的jQuery？

Question

我为html页面添加了3个jqueryscripts（用于画廊的colorbox插件，用于预订表单的弹出插件和用于页脚的滑动jquery。在添加这三个插件时，要么弹出关闭按钮不起作用，否则colorbox不起作用我已经尝试了所有方法，但是没有用...我在此添加了脚本。

<link href="02/css/login Popup/popup.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="02/js/Login pop_up/jquery.min.js"></script>


   <script type="text/javascript">

   $(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
  $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#"   class="close"><img src="02/images/close1.png" class="btn_close1" title="Close Window"    alt="Close" /></a>');

//Define margin for center alignment (vertical   horizontal) - we add 80px to the  height/width to accomodate for the padding  and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
    'margin-top' : -popMargTop,
    'margin-left' : -popMargLeft
});

//Fade in Background
 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

return false;
   });

   //Close Popups and Fade Layer
 $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
   $('#fade , .popup_block').fadeOut(function() {
    $('#fade, a.close').remove();  //fade them both out
});
return false;
 });
 });

 </script>

  <!---Popup plugin ending---> 



   <!---Slider plugin starting---> 

 <script type="text/javascript" src="slide/jquery-1.3.1.min.js"></script>

 <script type="text/javascript" src="slide/jquery.scrollTo.js"></script>



   <script>



    $(document).ready(function() {



$('a.panel').click(function () {



    $('a.panel').removeClass('selected');

    $(this).addClass('selected');



    current = $(this);



    $('#wrapper').scrollTo($(this).attr('href'), 800);      



    return false;

});



$(window).resize(function () {

    resizePanel();

});



     });



     function resizePanel() {



width = $(window).width();

height = $(window).height();



mask_width = width * $('.item').length;



$('#debug').html(width  + ' ' + height + ' ' + mask_width);



$('#wrapper, .item').css({width: width, height: height});

$('#mask').css({width: mask_width, height: height});

$('#wrapper').scrollTo($('a.selected').attr('href'), 0);



        }



        </script>

               <!---Slider plugin ending---> 

       <!---Colorbox plugin starting--->


        <link rel="stylesheet" href="css/colorbox.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
           <script src="plugins/jquery.colorbox.js"></script>
         <script src="plugins/colorbox-main.js" type="text/javascript"></script>
         <script src="plugins/jquery.colorbox-min.js" type="text/javascript"></script>

         <!---Colorbox plugin ending--->

Answer 1

真正的问题是您想要的插件需要不同版本的jQuery：您说弹出窗口和滑块可与1.9.1一起使用，而colorbox需要1.3，这意味着到目前为止，您还无法获得这3种都能正常工作的情况。 那么，真正的问题是“如何在同一页面上使用不同版本的jQuery？”。

之前已经回答过 ：使用jQuery的noConflict函数获取由不同变量表示的jQuery的两个版本，然后根据需要调用插件。

看到colorbox很奇怪（并且大多数代码使用古老版本的jQuery会越来越困难），默认情况下最好使用jQuery 1.9.1（或更高版本），然后将jQuery 1.3设置为其他颜色变量。 我已经改写了文件名，路径等，但是下面的代码应该可以使您有所了解：

<script src="jquery-1.9.1.min.js"></script>
<script src="popup.js"></script>
<script src="slider.js"></script>

<script src="jquery-1.3.2.min.js"></script>
<script src="colorbox.js"></script>

<script>
    $old = $.noConflict( true );
</script>

现在，对上面发生的事情进行总结：

1. 加载jQuery 1.9.1，它将自己分配给$和jQuery变量。
2. 加载弹出和滑块脚本。 这些假定jQuery 1.9.1绑定到了上面的变量名（它是），并附加了它们的行为。
3. 加载jQuery 1.3.2，它会自行替换jQuery变量-jQuery 1.9.1不再可以在全局范围中引用-但这对弹出式和滑动式插件来说不是问题，因为它们已经执行并附加了其行为。
4. 加载colorbox脚本，该脚本会找到jQuery 1.3.2并将其绑定。
5. 调用jQuery 1.3.2的noConflict将当前$和jQuery变量分配回执行此版本的jQuery（jQuery 1.9.1）之前的变量，并将当前jQuery（1.3.2）分配给您提供的任何变量。 从现在开始，如果要使用jQuery 1.3.2或colorbox插件，则需要使用varialbe而不是$ 。

我在这里创建了一个概念证明 ：这些插件非常简单（它们所做的只是使用jQuery来使单击段落的警报消息成为现实），但是它们只有在具有正确版本的jQuery时才能起作用。