Question

我正在尝试在我的网站中添加一个使用jQuery v1.8.3的Wowslider照片滑块，它有一个基于jQuery的导航菜单，但我不知道确切的版本（这里是tutorial我在哪里拿了源文件）

当注释掉两个jquery.js文件中的一个时，另一个工作正常。然而，一起出现问题我不能从Wowoslider制作滑块和动画菜单正确地协同工作。

我的HTML中的代码就是这些。问题来自js / jquery.js（未知版本）和engine1 / jquery.js（1.8.3版本）

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-bp.js"></script>
    <script type="text/javascript" src="js/navigation.js"></script>
    <script type="text/javascript" src="date_time.js"></script>
    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->
</head>

我试试这个Can I use multiple versions of jQuery on the same page?

解决方案似乎很简单，但我无法理解这个

然后，您不是$('#selector').function();，而是jQuery_1_3_2('#selector').function();或jQuery_1_1_3('#selector').function();。

我在我的html中更改了包含脚本代码，如下所示：

<!-- load jQuery 1.2.3 -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_2_3 = $.noConflict(true);
    </script>
            <!-- ...other code... -->
    <!-- load jQuery 1.8.3 -->
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <script type="text/javascript">
    var jQuery_1_8_2 = $.noConflict(true);
    </script>

然后我尝试更改使用jQuery 1.2.3的2 .js文件的代码所以我用$

替换所有jQuery_1_2_3个字符

排序示例默认为

（function（$）{ $ .extend（$。fx.step，{ backgroundPosition：function（fx）{ if（fx.state === 0＆amp;＆amp; typeof fx.end =='string'）{ var start = $ .curCSS（fx.elem，'backgroundPosition'）;

我改为：

(function(jQuery_1_2_3) { jQuery_1_2_3.extend(jQuery_1_2_3.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = jQuery_1_2_3.curCSS(fx.elem,'backgroundPosition');

我想我明白了什么不对。钢铁不工作..

Answer 1

请检查此链接以解决您的问题。

Can I use multiple versions of jQuery on the same page?

Answer 2

在这里，我想出了一个由我自己测试的解决方案。我检查你的菜单教程并下载源代码然后我在同一页面使用Wow Slider但我的方式如下：

//在Top of Head

中添加以下代码

<!-- Navigation Menu-->
<link rel="stylesheet" href="css/main.css" type="text/css" />   
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-bp.js" ></script>
<script type="text/javascript" src="js/navigation.js" ></script>
<!-- End Navigation -->

//在页面底部添加哇滑块脚本

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

现在在'navigation.js'中进行一些更改

1）写下

中的所有功能

(function($) {
  $(function() {
  // all navigation function put here

  });
})(jQuery);
// other code using $ as an alias to the other library

而不是

$(document).ready(function(){

});

我在此链接上为您上传了我的代码。请Download并让我知道它对您有用..对我而言，它适用于Chrome和Firefox。

两个不同的jquery.js文件位于同一个html文件中

2 个答案: