Question

我在将两个jQuery脚本放在同一页面上时遇到问题，我该怎么办？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidepanel.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('[data-slidepanel]').slidepanel( {
            orientation: 'left',
            mode: 'push'
        });
    });

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#Grid').mixitup();
    });
</script>

我知道jQuery.noConflict（）可以解决这个问题，但我不知道如何将它应用于此。有什么帮助吗？

Answer 1

每个人都说，你只需要一份jQuery副本。建议您使用Google CDN，如here所述。
如果它仍然无效，请分别尝试代码的每个元素。所以重新格式化你的代码就像这样。您会注意到我为其中一个脚本添加了type="text/javascript"。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidepanel.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 

<script type="text/javascript">
    (function($){ // Self-executing wrapper that sets $=jQuery
        $(function() { // Fires onload
            $('[data-slidepanel]').slidepanel( {
                orientation: 'left',
                mode: 'push'
            });
            $('#Grid').mixitup();
        });
    }(jQuery));
</script>

然后尝试评论两个$('...语句，看看是否有一个或两个都有效。

Answer 2

为什么你还需要两个jQuery库？！只需使用较新的！ ...我们甚至说你需要旧的，因为你需要一些新框架中没有的功能。只需在搜索模式下查找它们并将它们逐个复制到新框架（只有在像我一样离线使用jQuery时才能完成，这样可以节省开发期间的加载时间，因为它会被缓存。） P.S：我希望这不会导致任何版权侵犯：/

Answer 3

删除旧版并使用此版本http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 删除旧版本 jquery-1.5.2.js和jquery-1.9.1.min.js

两个jQuery脚本在同一页面上冲突

3 个答案: