-1

我最近问了一个关于这个的问题，我得到了使用以下代码将 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>

这适用于索引页面，但它似乎不适用于其他页面。我正在使用“Reveal Modal”和“magnific-popup”。我将它们都设置在各自的 jquery 库中，但是它们似乎仍然存在冲突。有问题的页面是mike-griffin.com/ronald_joyce.html。单击“我们的设计师”链接时会触发“显示模式”，并且单击页面上的图像时应触发“放大镜”灯箱，但它不会...但是如果我删除“ jquery-1.4 .4.min.js" 库可以正常触发，但“显示模式”停止工作。代码如下...

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

非常感谢您提供任何帮助，如果您读到这里但无济于事，我们将不胜感激。

4

2 回答 2

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>
于 2014-11-12T23:18:50.883 回答
0

在调用不同的 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>
于 2014-11-12T23:15:32.873 回答