gpt4 book ai didi

javascript - 冲突的 jQuery 脚本(NoConflict 修复了一个脚本但破坏了其他脚本)

转载 作者:行者123 更新时间:2023-11-28 16:16:41 25 4
gpt4 key购买 nike

我有一个滚动网站,其中有两个 jQuery“ slider ”(http://bxslider.com/),用于旋转图像。该网站运行良好。

客户现在需要第三个 jQuery 功能 ( jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout )。添加后,这会破坏两个初始 slider ,但页面滚动和添加的迂回脚本可以工作。

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

我不是 Java 也不是 jQuery 的专家,但我通常会随着时间的推移找到修复方法。这让我很困惑,但我确信我错过了一些简单的事情。以下是索引文件中的脚本(按顺序排列),忽略了不相关的 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 时,此方法有效,因此我认为问题出在 slider 脚本和环形交叉口脚本之间。这里 www(dot)irishofcourse.co.cc/firebrand/index-banners.html 是测试站点的 URL,其中保留了 noConflict。 注意:链接不会滚动页面,但其他一切都有效(案例研究是滚动的一部分)。

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

非常感谢任何帮助。本。

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

我认为该行是网站上曾经存在的元素的残留代码。我已经删除了它以及我认为是 commons.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'});
});

这些是控制页面滚动的行。我认为这是必须做出改变的地方。这是 commons.js 中唯一不在页面上运行的脚本/函数。

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

最佳答案

问题:

  1. 您将 jQuery 包含了三次并且包含了不同的版本。
  2. commons.js 需要 jCarousel 插件,该插件将包含在 plugins.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 对 $ 变量的控制。您可以添加$在 common.js 的第三行( $(document).ready(function($) { )?

===更新===

好吧,我最后的建议很愚蠢;您可以删除 $再次。下次尝试:-)
请替换行 $("#done-slider").jcarousel({$("#do-page-slider").jcarousel({jQuery("#done-slider").jcarousel({jQuery("#do-page-slider").jcarousel({ .

===更新===

那是成功的,但现在我们有一个新的错误。请同时替换 $jQuery在线$('#elements').jScrollPane({ .

===更新===

同时将其替换为 $('#elements').data('jsp').scrollToX(2000); 行.

===更新===

您必须再次替换 $jQuery$.scrollTo( 开头的两行.

关于javascript - 冲突的 jQuery 脚本(NoConflict 修复了一个脚本但破坏了其他脚本),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11276061/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com