scriptaculous和JQuery不协作

Question

我正在使用jQuery滑块浏览图像和脚本滑块动画在同一个页面上。如果我把它们放在两个单独的页面上，它们就能完美地工作。

当我以这种方式排序代码时。

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

脚本幻灯片正在工作，而jQuery幻灯片停止工作。当我这样点菜的时候。

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

jQuery开始工作，Scriptaculous停止工作。然后我寻找了一些解决方案，并指出使用jQuery.noConflict()；并用jQuery替换选择器$可以解决问题，但它不能。

script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

这只会迫使jQuery工作，而不管它是什么命令，并且它会使脚本停止工作。

任何建议在这里都很受欢迎。干杯。

Answer 1

我不太精通脚本，但马上就要做两件事：

1. 如果您计划将jQuery与另一个库一起使用(然后调用.noConflict())，请先加载jQuery ，然后调用.noConflict()，然后加载其他库。在这种情况下，就是原型和脚本。如果我没记错的话，这样更安全。
2. 确保jQuery coda滑块插件实际上支持.noConflict()。我想这就是Derek上面要说的-一旦调用了.noConflict()，jQuery就会将$变量释放回开放状态(例如，为了便于使用脚本)。如果coda滑块大量使用$变量(不适应.noConflict())，这可能是一个大问题。

Answer 2

你不太可能做到这一点--Scriptaculous依赖于Prototype来完成它的事情。

您最好的选择是找到一个与jQuery兼容的替代方案来替代您正在使用的Scriptaculous。

Answer 3

Jquery.coda-slider 2.0.js依赖于$，您需要将该文件中对$的任何引用更新为jQuery，并继续使用noConflict()

试试这个：

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script> 

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script>

使用jquery.coda- this file -2.0.js的滑块

如果这不起作用，你可能会想放弃jQuery，为prototype找到一个类似的插件，反之亦然。如果你只为lightbox使用prototype，jQuery也提供了一个很好的lightbox插件。