冲突的jQuery脚本(NoConflict修复了一个，但破坏了另一个）

Conflicting jQuery scripts (NoConflict fixes one but breaks other)

本文关键字：一个 另一个 坏了 脚本 jQuery NoConflict 冲突      更新时间：2023-09-26

我有一个滚动网站，有两个jQuery"滑块"（http://bxslider.com/），可以旋转图像。该网站工作正常。

客户端现在想要第三个jQuery功能（jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout）。添加后，这会破坏两个初始滑块，但页面滚动和添加的环形交叉路口脚本有效。

在彻底寻找解决方案后，我将 noConflict 添加到新添加的环形交叉路口。这修复了两个初始滚动条，新添加的环形交叉路口仍然可以正常工作，但这会破坏网站上的滚动脚本。

我不精通Java或jQuery，但我通常会随着时间的推移找到修复程序。这让我感到困惑，但我确信这是我错过的简单东西。以下是索引文件中的 scrips，按顺序，遗漏了不相关的 HTML：

<head>
<script src="js/queryLoader.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/commons.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

</head>
<body onLoad="init()" id="body"> 

<script type="text/javascript" src="http://www.firebrand-digital.com/test/wp-content/uploads/2012/02/jquery.bxSlider.min_.js"></script>

<!-- Sliders script -->
<script type="text/javascript">

jQuery(document).ready(function()
{ 
    $('#scroller1').bxSlider(
        {
            auto: true,
            speed: 2000,
            pause: 6000,
            prevImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/previous_arrow2.png',
            nextImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/next_arrow2.png'
        }
    );
    $('#slider1').bxSlider(
        {
            auto: true,
            speed: 1500,
            pause: 5000,
        }
    );

});
</script>
<!-- End sliders script -->
....html....
<!-- Roundabout 2 script -->
  <script src="http://fredhq.com/lib/js/libraries/jquery.js"></script> 
<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js">     </script>   
 <script>
 jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('ul.caro').roundabout();
});
</script>
<!-- Roundabout 2 script -->
....html....
</body>

JS/Commons.js包含滚动网站所需的所有脚本。当从环形交叉路口脚本中删除 noConflict 时，这有效，我收集问题出在滑块脚本和环形交叉路口脚本之间。这里的www（dot）irishofcourse.co.cc/firebrand/index-banners.html是测试站点的URL，其中保留了noConflict。注意：链接不会滚动页面，但其他一切都有效（案例研究是滚动的一部分）。

删除该行<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>会破坏站点上的所有 jQuery。我不确定这有什么意义，但我想我应该提到它。

任何帮助将不胜感激。本。

=======更新======

==

我认为该行是曾经在网站上的元素的残余代码。我已经删除了它以及我认为是公地.js中的剩余代码。滚动在没有环形交叉路口的情况下仍然有效，但是当我将其放回时它们仍然冲突。

仍然冲突的缺失功能 - 当您单击左侧的链接时，页面不会向下滚动到相应的部分。据我所知，

$('#navigation .logo .bars > ul > li > img').on("click",function(){ $.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'}); }); $('#navigation .logo .bars > ul > li > span').on("click",function(){ $.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'}); });

这些是控制页面滚动的行。我认为必须在这里做出改变。这是公共资源中唯一不作用于页面的脚本/函数.js。

再次感谢您一直以来的帮助。

问题：

  1. 你包含了三次jQuery和不同的版本。
  2. 共享资源.js需要jCarousel插件，该插件将包含在插件.js之后。

建议：

  • 删除行<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>和<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>。
  • 将<script defer src="js/plugins.js"></script>移到<script defer src="js/commons.js"></script>之前。

=== 更新 ===

抱歉，找不到 jCarousel，因为 noConflict 方法放弃了 jQuery 对 $ 变量的控制。你能在公共的第三行添加一个$吗.js（$(document).ready(function($) {）？

=== 更新 ===

好吧，我的最后一个建议很愚蠢;你可以再次删除$。下次尝试：-）
请将$("#done-slider").jcarousel({和$("#do-page-slider").jcarousel({行替换为jQuery("#done-slider").jcarousel({和jQuery("#do-page-slider").jcarousel({。

=== 更新 ===

这是成功的，但现在我们有一个新的错误。请在行$('#elements').jScrollPane({中将$替换为jQuery。

=== 更新 ===

还要在行$('#elements').data('jsp').scrollToX(2000);中替换它。

=== 更新 ===

同样，您必须在以 $.scrollTo( 开头的两行中将$替换为 jQuery 。

相关文章：