Question

我有一个页面，其中包含两个jquerys，一个用于滑块，另一个用于填充dropdawn。问题是当我把它们两个我的jqueries不能一起工作时。我该怎么办？

我的索引：

   <!-- JAVASCRIPTs for slider -->  
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/comment-reply.js"></script>
    <script type="text/javascript" src="js/jquery.quicksand.js"></script>
    <script type="text/javascript" src="js/jquery.tipsy.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.min.js"></script>
    <script type="text/javascript" src="js/jquery.anythingslider.js"></script>
    <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
    <script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"></script>
    <script type="text/javascript" src="js/shortcodes.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="js/jquery.tweetable.js"></script>
    <script type="text/javascript" src="js/slider-layer.js"></script>

    <!-- JAVASCRIPTs for dropdawn -->  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

$(document).on('change','.productcategory',function(){
   console.log("hmm its change");

  var cat_id=$(this).val();

  var div=$('#d').parent(); 


  var op=" ";

  $.ajax({
    type:'get',
    url:'{!!URL::to('findProductName')!!}',
    data:{'id':cat_id},
    success:function(data){
      //console.log('success');

      //console.log(data);

      console.log(data.length);

      op+='<option value="0" selected disabled></option>';

      for(var i=0;i<data.length;i++){

           op+='<option value="'+data[i].id+'">'+data[i].model+'</option>';


     console.log(data[i].model);
       }

       div.find('.productname').html(" ");
       div.find('.productname').append(op);
    },
    error:function(){

    }
  });
});

  });
  </script>

我尝试添加

<script type="text/javascript">
   var jQuery = $.noConflict(true);
</script>

但是当在bouth脚本末尾添加这个时，滑块工作和下拉列表没有，当没有添加此代码时，冲突工作下拉列表和滑块不起作用。

我使用下一个链接：

Can I use multiple versions of jQuery on the same page?

http://jsfiddle.net/PGLVs/

我做错了什么想法？

Answer 1

一个简单的例子：

头脑中的

：

<script type="text/javascript" src="/jqueryV1.js"></script>
<script type="text/javascript">
    var $myJQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jqueryV2.js"></script>
<!-- the version 2 in now in $ while the 1 is in $myJQ -->

使用版本2的代码可以保留全局$。

现在，在其余代码中，您可以简单地将所有$替换为使用版本1的$myJQ，但这意味着重写所有内容，而您可以执行的操作是使用充当本地var的参数，以便能够在使用版本1的代码中保留$：

(function($){
    //inside this function, using $ means using the global $myJQ
    $('#selector')...
})($myJQ);

Answer 2

基本上你应该为新版本发布release或jQuery变量，所以在两个版本之间添加noConflict，如下所示。这将为新版本提供$别名。

<script src"olderversion"></script>

<script type="text/javascript">
     jQuery.noConflict();
</script>

<script src"newerversion"></script>

如果您必须使用旧版本使用$或jQuery调用任何包含大量行的插件，您可以按照以下方法进行操作。

jQuery.noConflict();
(function( $ ) {// if you want to use $
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

// Other code using $ as an alias to the other library

jQuery.noConflict();
    (function( jQuery ) {// if you want to use $
      $(function() {
        // More code using jQuery  as alias to jQuery
      });
    })(jQuery);

如果符合您的要求，请将其标记为答案。

jquery - 如何解决两个jquery冲突

2 个答案: