Question

你好我是一个新手，当谈到jquery我试图在同一页面使用两个脚本，但他们只是不会工作，我尝试使用noconflict但我不知道如何正确实现它我的下面的代码是如下。

    <html>
     <head>
        <title>example code</title>
        <script src="scripts/jquery-1.10.2.min.js"></script> 
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
     </head>
      <body>
<div class="flexslider">
  <ul class="slides">
          <li><img src="images/flexslider_images/cross_platform_image.png" alt="elite it designs using w3c compliant coding to create responsive websites" title="responsive website design"/></li></ul>
       <script src="scripts/jquery.flexslider.js"></script> 
        <script type="text/javascript">
$(function(){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",

  });
});

上面的滑块需要2.0.2库才能工作，如下所示。

   <div class="ms-display-template">
    <div class="ms-display-cont">
        <img src="images/display.png" class="ms-display-bg" />
        <div class="ms-dis-slider-cont">
            <!-- masterslider -->
            <div class="master-slider ms-skin-default" id="masterslider">
                <div class="ms-slide">
                    <img src="images/blank.gif" data-src="images/1.jpg" alt="lorem ipsum dolor sit"/>  
                </div></div></div></div></div>
    <script src="scripts/jquery.easing.min.js"></script>

    <!-- Master Slider -->
    <script src="scripts/masterslider.min.js"></script>
            <script type="text/javascript"> 

 var slider = new MasterSlider();
    slider.setup('masterslider' , {
        width:507,
        height:286,
        speed:20,
        preload:0,
        space:2,
        view:'flow'
    });
    slider.control('arrows');   
    slider.control('bullets',{autohide:false});

</script>

这需要1.10.2工作，当一个工作时另一个工作不会有人请能够给我一步一步指导如何实际做到这一点。就像我说我是新来的。

提前感谢您的帮助。

亚当

Answer 1

您可以使用带有true参数的jQuery noConflict method来尝试解决此问题。但是有一个主要的缺点：

如果有必要，您可以通过将jQuery作为参数传递给方法来释放true名称。这很少是必要的，如果你必须这样做（例如，如果你需要在同一页面上使用多个版本的jQuery库），你需要考虑大多数插件都依赖于{{1在这种情况下，变量可能无法正常运行。

也就是说，如果在用于加载jQuery 2.0.2的jQuery标记之后，你插入了

<script>

全局<script type="text/javascript">jQuery.noConflict(true)</script>变量将代表jQuery 1.10.2，撤消加载2.0.2版本时应用的覆盖。

你不能做什么，但是，某种方式有相同的全局变量代表两个版本，这意味着你几乎肯定会遇到一个或另一个脚本失败的问题工作 - 即使你做了一些花哨的步法，以便每个插件看到jQuery指向它在初始化时期望的库版本，给定的文档摘录表明两个脚本都有可能尝试引用全局{事件处理程序或类似事件中的{1}}变量，这意味着它们中至少有一个不起作用。

理论上，您可以通过一些真正花哨的步法来解决这个问题，以确保每个插件的回调都能看到他们期望的jQuery值 - 但这取决于什么那些插件确实可能甚至不可能，即使它是，但结果几乎肯定是不可维护的。

tl; dr解决问题的方法是标准化单个版本的jQuery，找到适合该版本的插件并做你需要的插件，或者选择一个插件并修改它以便它可以使用你正在使用的jQuery版本。（我建议坚持使用1.10，因为它不会有2.0更改，因此可以使用更广泛的插件来使用它。）

Answer 2

不使用冲突代码可以解决您的问题。

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

这里是完整的参考：http://api.jquery.com/jQuery.noConflict/

希望能回答你的问题。 Shafi Ur Rahman

如何在同一页面中使用两个不同的jquery脚本？

2 个答案: