1

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

<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--->
4

1 回答 1

1

真正的问题是您想要的插件需要不同版本的 jQuery：您说弹出框和滑块使用 1.9.1，但颜色框需要 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's noConflict- 这会将当前$和jQuery变量分配回执行此版本 jQuery（jQuery 1.9.1）之前的任何内容，并将当前 jQuery（1.3.2）分配给您提供的任何变量。$从现在开始，如果您想使用 jQuery 1.3.2 或 colorbox 插件，您将需要使用该变量而不是。

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

于 2013-09-02T11:11:44.680 回答