web-dev-qa-db-ja.com

TypeError：j（...）。bxSliderは関数ではありません-スライダーが機能していません

私は this ウェブサイトに取り組んでいます（私はウェブサイトを作った人ではありませんでしたが、残念ながらそれを修正する必要があります）。 Firebugでこのエラーが発生しました：TypeError：j（...）。bxSliderは関数ではありません

これが私の<head>：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>

これが私のマークアップです：

<div class="the-main-slider-container">
<ul class="bxslider">

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
    </li>

</ul>

<div id="bx-pager">
<div class="pager-wrapper">
    <div class="pager-container">
        <a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
        <a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
        <a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
        <a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
        <a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
    </div>
</div>
</div>
</div>

スクリプトは次のとおりです。

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

         j(document).ready(function() 
         {
            j('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                mode: 'fade'
            });

         });  

        j(function ($) {
        j(document).ready(function(){
          j('.slider8').bxSlider({
            mode: 'vertical',
            slideWidth: 300,
            minSlides: 2,
            slideMargin: 10
          });
        }); 
        });

        j(document).ready(function() {
            j(".various").fancybox({
                maxWidth    : 450,
                maxHeight   : 400,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        });

        </script>

ご覧のとおり、私はnoConflict;を使おうとしました。インターネット上で同じエラーの投稿がたくさん見られ、それらのほとんどがnoConflictで問題を解決したように見えるからです。しかし、それは私にとってはうまくいきません。

ちなみに、すべてのスライダーはCyclone Sliderというプラグインで作成されていたので、前の開発者がやったことは本当にわかりません...

そして、マークアップは問題ないようです。何が悪いのかわかりません。どんな助けでも本当にありがたいです。どうもありがとうございました！

編集＃1：ソースコードで見つけたjQueryの他のインスタンス。

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.carousel.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.swipe.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.tile.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.video.min.js?ver=2.8.2'></script>
javascriptjqueryhtmlwordpressbxslider
5
Ekin

いろいろ試してみて、なんとか自分の問題を解決できました。 bxSlider、easyResponsiveTabs、およびそれらを呼び出すスクリプトのJavaScriptファイルをfooter.phpに配置しました。しかし、私はjQueryとjQueryのUIファイルをheader.phpに、スライダーのcssファイルと一緒に残しました。

これですべてが正常に機能し、マークアップは検証テストに合格しました。同じ種類のエラーが発生している場合。

  1. JQueryおよびその他のJavaScriptファイルパスを確認してください。
  2. 古いバージョンのjQueryを使用しているか、互換性のないバージョンのjQueryとjQueryUIを使用しているかを確認してください。
  3. すべてのリンクタグをfooter.phpに配置し、header.phpからスクリプトを呼び出す可能性のある愚かな開発者と協力しないでください...
  4. Jquery.min.jsのインスタンスやバージョンが異なるかどうかを確認します
  5. （私の状況では）bxSlider jsファイルをfooter.phpに置きますが、cssファイルはheader.phpに残します（検証のために、この方法でうまく機能しました）

また、あなたは私に手紙を書くことができます、私は助けることを試みることができます。

17
Ekin

JQueryスクリプトをチェックすると答える人もいます。1つだけであることを確認してください。しかし、「なぜ」には答えないでください。質問。同じ（この質問）問題がありましたが、解決しました。 bxSliderの（リンクされた）JSファイルはjQueryの関数を作成し、後のファイルはこの関数を上書きします（jQueryには元々bxSliderのものが含まれていないため、削除してください）。したがって、答えは、最後のjQuery JSファイルリンクの後にJSリンクを配置すると、機能します。

0
Kasza Patrik

ほとんどの場合、原因はjQueryの複数のインスタンスです。をさらに下に見ると、WPがさらにタグを挿入しており、そのうちの1つがjQueryのように見えることがわかります。

JQueryの2番目のインスタンスは、おそらくプラグインによって挿入されています。どちらを特定して無効にして、問題が解決するかどうかを確認してください。

0
josefresco