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>

这适用于索引页面，但它似乎不适用于其他页面。我正在使用＆＃39;显示模式＆＃39;和＆＃39; magnific-popup＆＃39;。我将它们都设置在各自的jquery库中，但它们似乎仍然存在冲突。有问题的页面是mike-griffin.com/ronald_joyce.html。＆＃39;显示模式＆＃39;当我们的设计师＆＃34;点击链接，然后点击广告＆＃39;灯箱应该点亮并点击页面上的图像，但它不会...但是如果我删除＆＃34; jquery-1.4.4.min.js＆＃34;图书馆它很好，但是“显示模式”＃39;停止工作。代码列在下面......

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

冲突的Jquery库

2 个答案: