Question

我有这段代码可以在网页上正常运行：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function(){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

但是，只要我取消注释prototype.js行，就会出错：

未捕获的TypeError：无法调用null的方法'infiniteCarousel'。

prototype.js文件来自http://prototypejs.org/，我正在将其用于其他一些功能。我已经搜索了很多但是无法提出解决方案 - 我该如何解决这个问题呢？

Answer 1

您的Prototype.js库正在接管$全局变量。您可以通过以下方式将$ variable分配给document.ready快捷方式范围内的jQuery：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script>
    $(function($){
        $('#carousel').infiniteCarousel({
            imagePath: 'images/'
        });
    });
</script>
<!--<script src="prototype.js"></script>-->

$(document).ready()函数及其快捷方式$(function(){})将jQuery工厂函数作为其回调的第一个参数发送。命名参数$将本地$变量的范围作为该函数中的jQuery。

将来，我建议在之后原型中使用jQuery，并使用jQuery.noConflict方法放弃jQuery对$的控制。然后，您可以使用IIFE包装器将$函数分配给仅在必要的函数内部的jQuery：

// prototype code using prototype's $ out here
(function($){
    // jQuery code using jQuery's $ goes here
}(jQuery));

在这种特殊情况下，您不需要这样做，因为$(document).ready()方法已经为您完成了。但你应该习惯这个工具。

你应该替换Prototype。：）

Prototype.js在jQuery中用InfiniteCarousel创建问题

1 个答案: