javascript - 遇到多个 Jquery 库的问题

Question

我看过关于无冲突的帖子，但我不是很懂代码，无法独自解决。我无法让两个库协同工作。

在顶部，我有 1.9.1 库，它控制新闻自动收报机和轮播。底部附近有一个库 1.6.1，它控制 Dribbble 提要。如果我删除 1.6.1，除了 dribbble feed 之外的所有东西都有效，如果我删除 1.9.1，dribbble feed 是唯一有效的。我上传了网站供大家查看。如果您可以编辑我的代码使其正常工作，那将是一件了不起的事情，我对 jquery 的了解不多。

这个版本在最底部有一个可用的 dribbble feed http://michaelcullenbenson.com/MichaelCullenBenson.com/index.html

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

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

<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 or $("#selector ") 而不是 jQuery.each 或 jQuery("selector")

注意:删除下面代码中<script>中的空格(SO显然不喜欢script标签)

要深入研究您的具体案例，您需要像往常一样首先加载 jQuery 1.9.1 版:

< script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >< /script > (You should really load this from google cdn, here is why)

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

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

之后是无冲突部分。包括一行脚本如下:

< script > var $j6 = jQuery.noConflict(); < /script >

这会将 1.6.1 版本设置为 $j6“命名空间”，并将 1.9.1 版本保留在正常的 $“命名空间”中，这将允许您像这样定位特定版本:

$j6('#user').dribble() and $('#news').innerfade()

现在您应该同时运行 2 个独立版本的 jquery。

您可能需要对 dribble 插件(以及使用 1.6.1 库的任何其他插件)进行大量查找/替换。将 jQuery(或 $)的所有实例替换为 $j6。

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