Conflicting Jquery libraries

Question

我最近问了一个问题，有人建议我使用以下代码将jquery代码分离到各自的库中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {
        //1.10.2 code goes here
    });
</script>
<script src="js/jquery-1.4.4.min.js"></script>
<script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {
        //1.4.4 code goes here
    });
</script>

这对"索引"页面很有效，但对其他页面似乎不起作用。我正在使用"显示模式"one_answers"放大弹出窗口"。我将它们都设置在各自的jquery库中，但它们似乎仍然存在冲突。有问题的页面是mike-griffin.com/ronald_joyce.html。当点击"我们的设计师"链接时，"Reveal Modal"会启动，当点击页面上的图像时，"放大弹出"灯箱应该会启动，但它没有。。。但是，如果我删除"jquery-1.4.4.min.js"库，它会很好地启动，但"Reveal Modal"会停止工作。下面列出了代码。。。

<script src="js/jquery-1.10.2.min.js"></script>
    <script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {
        $(document).ready(function() {
        $('.image-link').magnificPopup({type:'image'});
        });
        $('.thumbnail-contaner').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image'
         // other options
        });
    });
    </script>
    <script src="js/jquery-1.4.4.min.js"></script>
<script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {
    $.backstretch("img/Background img/Zoe-10-Background.jpg" , {duration: 3000, fade: 1000});
    $('#main-nav-modal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
}); 
    $('#sale-nav-modal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
}); 
    });
    </script>

如果你读到这篇文章，但无能为力，我们将不胜感激。

Answer 1

如果您使用开发工具检查控制台，您将看到至少三个错误：

Uncaught TypeError: undefined is not a function ronald_joyce.html:234
Uncaught TypeError: undefined is not a function jquery.backstretch.min.js:4
GET http://mike-griffin.com/css/modal-gloss.png 404 (Not Found) ronald_joyce.html:225

第一个表示你在错误的地方包含了所需的插件；应该是：

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script> <!-- This is the proper place -->
    <script>
    //code that uses 1.10.2 should be enclosed as follows right after loading 1.10.2
    jQuery(function( $ ) {
    ......

解决此错误后，请检查下一个错误是否也得到解决。事实上，第二个与另一个插件的位置有关：

    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.backstretch.min.js"></script><!-- This is the proper place -->
    <script>
    //code that uses 1.4.4 should be enclosed as follows
    jQuery(function( $ ) {
    .....

如果这些行是插件，您可能需要将它们移到适当的位置——将它们与适当的jQuery版本进行匹配：

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.reveal.js"></script>

Answer 2

在调用不同的jQuery库时，最好使用不同的别名。

更多详细信息：http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

示例可以修改为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    // use usual jQuery alias with modern jQuery
    jQuery(function( $ ) {
        //1.10.2 code goes here
    });
</script>
<script src="js/jquery-1.4.4.min.js"></script>
<script>
    // make special alias, you can put this row as last row in the end of js/jquery-1.4.4.min.js
    var jQuery1_4_4 = jQuery.noConflict();
    jQuery1_4_4(function() {
        //1.4.4 code goes here
        jQuery1_4_4("div").hide();
    });
</script>