-2

重複の可能性:
同じページで複数のバージョンの jQuery を使用できますか?

私は 3 つの JQUery wordpress プラグインを使用しているので、header.php ファイルには 3 つの同様の jquery スクリプト (プラグインを機能させるために非常に重要です..) があり、1 つ削除/追加すると問題に直面します..

ここにあります：（私の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の競合を回避するために、上記の関数を正しく使用するにはどうすればよいですか..?


おっしゃる通り、以下のように変更しました。

$(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});
        });


どこかで間違っている場合は、親切に訂正してください...



すべての変更を行った後、これが私のコードです:(ただし、まだ出力が得られません)

<!-- 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>

まだ出力が得られません..何が問題なのか教えてください..?...

4

1 に答える 1

0 
 <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>

次に、競合を避けるために、代わりにorまたはを$('#selector').function();実行します。someName('#selector').function();googleapis('#selector').function();mywebsite('#selector').function();

または必要なもの$を使用する代わりにsomeNamegoogleapismywebsite

$(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] );
        }

        });

    });
于 2012-10-05T00:07:53.213 に答える