TypeError：j(...).bxSlider 不是函数 - 滑块不起作用

问题描述 投票：0回答：4

我正在开发this网站（我不是制作该网站的人，但不幸的是我必须修复它）。 我在 firebug 上遇到此错误：TypeError: j(...).bxSlider is not a function

这是我的

<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>
javascript jquery html wordpress bxslider
4个回答
18
投票

在尝试了很多不同的事情之后，我成功解决了自己的问题。我已将 bxSlider、easyResponsiveTabs 的 JavaScript 文件以及调用它们的脚本放置到 footer.php。但我将 jQuery 和 jQuery UI 文件以及滑块的 css 文件留在了 header.php 中。

现在一切正常，标记通过了验证测试！ 如果您遇到同样的错误；

  1. 检查您的 jQuery 和其他 JavaScript 文件路径。
  2. 检查您是否使用旧版本的 jQuery 或不兼容版本的 jQuery 和 jQuery UI。
  3. 不要与愚蠢的开发人员合作，他们可能会将所有链接标签放入 footer.php 并从 header.php 调用脚本...
  4. 检查您是否有不同的 jquery.min.js 实例和/或版本
  5. （在我的情况下）将 bxSlider js 文件放入 footer.php，但将 css 文件保留在 header.php 中（用于验证，这样效果很好）

你也可以写信给我，我可以尽力帮忙。

2
投票

最有可能的原因是 jQuery 的多个实例。再往下看，你会发现 WP 插入了更多标签，其中之一看起来是 jQuery。

jQuery 的第二个实例可能是由插件插入的。尝试识别哪个并禁用以查看是否可以解决问题。

0
投票

有人回答说检查jQuery脚本，确保只有一个。但没有回答“为什么？”问题。我有同样的（这个问题）问题，但解决了。 bxSlider 的（链接的）JS 文件为 jQuery 创建了一个函数，后来的文件覆盖了这个函数（删除它，因为 jQuery 最初不包含 bxSlider 的东西）。所以答案是：将 JS 链接放在最后一个 jQuery JS 文件链接之后，然后就可以了。

0
投票

这对我有帮助，谢谢！特别阅读反馈和评论

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.