Question

我已经看过关于没有冲突的帖子，但我不是很精通代码而且不能单独解决这个问题。我在制作两个图书馆时遇到了麻烦。

在顶部，我有1.9.1库控制新闻自动收报机和旋转木马。在底部附近有一个库1.6.1，它控制一个Dribbble feed。如果我删除1.6.1除了运球饲料之外的所有东西，如果我删除了1.9.1运球饲料是唯一可行的。我上传了网站供你们查看。如果您可以编辑我的代码以使其工作非常棒，那么我对jquery的了解并不多。

这个版本底部有一个可靠的运球补给 http://michaelcullenbenson.com/MichaelCullenBenson.com/index.html

此版本的Feed已损坏，其他一切正常。 http://michaelcullenbenson.com/MichaelCullenBenson.com/index2.html

帮助将是惊人的，因为运球饲料是我试图在我的主页上完成的最后一个元素，我将能够继续前进。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>


        <script type="text/javascript" src="js/jquery.innerfade.js"></script>


        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 600,
                        timeout: 6000,
                        type: 'random',
                        containerheight: '1em'
                    });


            });
    </script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="utilcarousel-files/utilcarousel/jquery.utilcarousel.min.js"></script>
        <script src="utilcarousel-files/magnific-popup/jquery.magnific-popup.js"></script>
        <script src="js/responsive-nav.js"></script>





        <script>
            $(function() {


                $('#fullwidth').utilCarousel({
                    breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
                    mouseWheel : false,
                    rewind : true,
                    autoPlay : true,
                    pagination : false
                });

                $('#fullwidth2').utilCarousel({
                    breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
                    mouseWheel : false,
                    rewind : true,
                    autoPlay : true,
                    pagination : false
                });

            });
        </script>

   <script>     
        $(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#aboutarea").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#aboutarea').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

    </script>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>   

    <script type="text/javascript" src="dribbble.js"></script>  
    <script type="text/javascript">

    $(function () {

        $('#user').dribbble({
            player: 'MCBDesign', 
            total: 1
        }); 
    });

    </script>

Answer 1

首先，请记住，绝不建议在同一页面上使用两个单独版本的jQuery。但是，如果您必须这样做，可以使用以下方法使其正常工作。

解释说明：

看起来你并不完全了解jQuery无冲突是如何工作的。

没有冲突的想法并不像加载一个版本的jQuery及其脚本那么简单，然后包括另一个版本的jQuery及其脚本..最容易将旧版本分配给它自己的“命名空间”（这是真的只是一个巨大的功能）同时让新版本使用默认的“命名空间”（jQuery 或 $）

注意： jQuery通常采用$的“命名空间”，这就是为什么你会看到这样的代码行：$ .each 或 $（“#selector “）而不是jQuery.each 或 jQuery（”selector“）

注意：删除＆lt;中的空格脚本＆gt;在下面的代码中（SO显然不喜欢脚本标签）

要深入了解您的具体情况，您需要像往常一样首先加载jQuery版本1.9.1：

＆LT; script src =“// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”＆gt;＆lt; / script＆gt; （你应该从谷歌cdn，here is why）
加载它

然后，包括旧版本的jQuery，1.6.1。

＆LT; script src =“// ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”＆gt;＆lt; / script＆gt;

之后是noconflict部分。包括一行脚本，如下所示：

＆LT;脚本＆gt; var $ j6 = jQuery.noConflict（）; ＆LT; / script＆gt;

这会将1.6.1版本设置为$ j6“命名空间”并将1.9.1版本保存在普通的$“命名空间”中，这样您就可以像这样定位特定版本：

$ j6（'＃user'）。运球（）和$（'＃news'）。innerfade（）

现在你应该有2个单独版本的jquery并排运行。

您可能需要在运行插件（以及使用1.6.1库的任何其他插件）上进行批量查找/替换。用$ j6替换jQuery（或$）的所有实例。

请注意，这可能不是绝对最佳的解决方案..我不是没有冲突的专家，但它一直对我有用。

多个Jquery库出现问题

1 个答案: