JQuery скрипт теги конфликта

Question

Можно создать дубликат:
Can I use multiple versions of jQuery on the same page?

Iam использованием 3 JQuery плагинов WordPress, так что в моем файле header.php, у меня есть 3 аналогичные скрипты JQuery (которые очень важно, чтобы мой плагин работал ..) и, кроме того, iam столкнулся с проблемой, если один удалил/добавил.

вот они: (в моем header.php)

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

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

<script src="http://mywebsite.com/price-filter-wid-css/jquery-1.8.2.js"></script> 

эти 3 конфликтуют друг с другом, и вывод не получается должным образом. Итак, как я могу заставить мои плагины работать ..?

Таким образом, мне нужно держать так, как показано ниже:

<script> 
var jq142 = jQuery.noConflict(); 
</script> 
<script> 
var jq142 = jQuery.noConflict(); 
</script> 
<script> 
var jq182 = jQuery.noConflict(); 
</script> 

Ничего плохого от выше ???

Вот мои другие коды:

$(document).ready(function() { 
      $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 


$(function() { 
     $("#makeup").slider({ 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 0, 500 ], 
      slide: function(event, ui) { 
      $("#minprice").val(ui.values[ 0 ]);  
      $("#maxprice").val(ui.values[1 ]); 
      $("#pricego").val(ui.values[0]+'-'+ui.values[1]); 
     } 

     }); 

    }); 

Итак, как я могу правильно использовать выше функций таким образом, чтобы избежать от этих Jquery conflictions ..?

Согласно вы сказали, я изменился, как показано ниже:

$(function() { 
     mywebsite("#makeup").slider({ 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 0, 500 ], 
      slide: function(event, ui) { 
      $("#minprice").val(ui.values[ 0 ]);  
      $("#maxprice").val(ui.values[1 ]); 
      $("#pricego").val(ui.values[0]+'-'+ui.values[1]); 
     } 

     }); 

    }); 


$(document).ready(function() { 
      liquidcarousel('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 

Пожалуйста, любезно исправьте меня, если Иам неправильно somwehere ...

После выполнения все изменения, это мой код: (но все еще не получается)

<!-- Liquidcarousel Stuff --> 
<link type='text/css' rel='stylesheet' href='liquidcarousel/css/style.css' /> 
<link type='text/css' rel='stylesheet' href='liquidcarousel/css/liquidcarousel.css' /> 
<script type="text/javascript" src="liquidcarousel/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    var liquidcarousel = $.noConflict(true); 
    </script> 
<script type="text/javascript" src="liquidcarousel/js/jquery.liquidcarousel.pack.js"></script> 
<script type="text/javascript"> 

     $(document).ready(function() { 
      liquidcarousel('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 

     $(document).ready(function() { 
      liquidcarousel('#liquid2').liquidcarousel({height:129, duration:100, hidearrows:false}); 
     }); 

</script> 



<!-- Categories Display Widget Stuff --> 
<link href="http://mywebsite.com/cat-wid-css/css/dcaccordion.css" rel="stylesheet" type="text/css" /> 
<link href="http://mywebsite.com/cat-wid-css/css/skins/blue.css" rel="stylesheet" type="text/css" /> 
<link href="http://mywebsite.com/cat-wid-css/css/skins/graphite.css" rel="stylesheet" type="text/css" /> 
<link href="http://mywebsite.com/cat-wid-css/css/skins/grey.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
     var googleapis = $.noConflict(true); 
    </script> 
<script type='text/javascript' src='http://mywebsite.com/cat-wid-css/js/jquery.cookie.js'></script> 
<script type='text/javascript' src='http://mywebsite.com/cat-wid-css/js/jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='http://mywebsite.com/cat-wid-css/js/jquery.dcjqaccordion.2.7.min.js'></script> 
<script type="text/javascript"> 
$(document).ready(function($){ 

        googleapis('.accordion-6').dcAccordion({ 
         eventType: 'hover', 
         autoClose: true, 
         saveState: true, 
         disableLink: true, 
         menuClose: false, 
         speed: 'medium', 
         showCount: true, 

         autoExpand: true, 
         cookie : 'dcjq-accordion-1', 
         classExpand : 'dcjq-current-parent', 

         menuClose: false  
        }); 

}); 
</script> 







<!-- Price Filter Display Widget Stuff --> 
    <link rel="stylesheet" href="http://mywebsite.com/price-filter-wid-css/themes/base/jquery.ui.all.css"> 
    <script src="http://mywebsite.com/price-filter-wid-css/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
      var mywebsite = $.noConflict(true); 
     </script> 
    <script src="http://mywebsite.com/price-filter-wid-css/ui/jquery.ui.core.js"></script> 
    <script src="http://mywebsite.com/price-filter-wid-css/ui/jquery.ui.widget.js"></script> 
    <script src="http://mywebsite.com/price-filter-wid-css/ui/jquery.ui.mouse.js"></script> 
    <script src="http://mywebsite.com/price-filter-wid-css/ui/jquery.ui.slider.js"></script> 
    <link rel="stylesheet" href="http://mywebsite.com/price-filter-wid-css/demos.css"> 
    <style> 
    #demo-frame > div.demo { padding: 10px !important; }; 
    </style> 

    <script> 


    mywebsite(function() { 
     mywebsite("#makeup").slider({ 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 0, 500 ], 
      slide: function(event, ui) { 
      mywebsite("#minprice").val(ui.values[ 0 ]);  
      mywebsite("#maxprice").val(ui.values[1 ]); 
      mywebsite("#pricego").val(ui.values[0]+'-'+ui.values[1]); 
     } 

     }); 

    }); 





    </script> 

И до сих пор не получает выход .. пожалуйста скажите мне еще что пошло не так? .. ...

Answer 1

<script type="text/javascript" src="liquidcarousel/js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
    var someName = $.noConflict(true); 
    </script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var googleapis = $.noConflict(true); 
    </script> 

    <script src="http://mywebsite.com/price-filter-wid-css/jquery-1.8.2.js"></script> 
     <script type="text/javascript"> 
      var mywebsite = $.noConflict(true); 
     </script> 

Тогда вместо $('#selector').function();, вы могли бы сделать someName('#selector').function(); или googleapis('#selector').function(); или mywebsite('#selector').function(); к избегать конфликтов.

Вместо $ должны использовать someName или googleapis или mywebsite все, что вам нужно

$(document).ready(function() { 
      // $('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); 
      googleapis('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false}); //if you need to use googleapis jquery version in that case 
     }); 


someName(function() { 
     someName("#makeup").slider({ // if you need liquidcarousel to use in this case 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 0, 500 ], 
      slide: function(event, ui) { 
      someName("#minprice").val(ui.values[ 0 ]);  
      someName("#maxprice").val(ui.values[1 ]); 
      someName("#pricego").val(ui.values[0]+'-'+ui.values[1]); 
     } 

     }); 

    });