scriptaculous 和 JQuery 不协作

Question

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

当我以这种方式订购代码时。

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

Scriptaculous 幻灯片正在工作，而 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 工作，无论它的顺序如何，并且它会使 Scriptaculous 停止工作。

任何建议在这里表示赞赏。干杯。

Answer 1

我不太熟悉 Scriptaculous，但有两件事：

1. 如果您打算将 jQuery 与另一个库一起使用（然后调用 .noConflict()），< strong>首先加载 jQuery，然后调用 .noConflict()，然后加载其他库。在这种情况下，原型和脚本化。如果我没记错的话，这样更安全。

2. 确保 jQuery coda 滑块插件确实支持 .noConflict()。我认为这就是 Derek 上面想说的 --- 一旦你调用了 .noConflict()，jQuery 就会将 $ 变量释放回开放状态（对于 scriptaculous例如，使用）。如果 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-slider-2.0 的此文件。如果

​这不起作用，您可能想要放弃 jQuery 并为原型找到类似的插件，反之亦然。如果您只使用 Lightbox 原型，jQuery 还提供了一个不错的 lightbox 插件。

Answer 4

jQuery 和 Prototype 都使用 $ 选择器。 noConflict() 应该可以解决此冲突，但如果不是，您可以在文档中找到 $ 符号并将其替换为 document.getElementById

Answer 5

这只是理查德·尼尔·伊拉甘第二点的扩展（我完全同意）。
为了在无冲突模式下使用 jQuery，所有插件都应该采用通用形式：

jQuery(function() {
    (function($) {
        $.fn.codaSlider = function() {
            // Plugin's code goes here.     
            // Within this function, $ refers to jQuery.
        };
    })(jQuery);
});

外部函数在页面加载时执行，并且无需使用“$”即可访问 jQuery（因此对于 Prototype 来说是安全的）。
内部自执行函数只是为了创建一个 $ 引用 jQuery 的范围。
在 SEF 内部，$ 指的是 jQuery，正如不支持开箱即用的 noConflict 的简单插件所期望的那样。因此，此类插件的代码通常可以复制并粘贴到上面的 SEF 正文中，并且它会正常工作 (tm)。

这优于将“$”的所有实例更改为“jQuery”，因为它不会更改正则表达式等中的“$”字符，并且除了缩进之外，原始代码保持不变，因此在将来的更改中更容易合并。

华泰