滑块不工作,我有TypeError:jQuery(...)。easyResponsiveTabs不是一个函数

时间:2014-05-06 01:44:39

标签: javascript php jquery html wordpress

好的,我有一个 wordpress 网站:http://reformpackagingmachine.com

我有滑块问题而且我收到此错误:

" TypeError:jQuery(...)。easyResponsiveTabs不是函数"

activate:function(event){//如果切换标签,则回调函数

关于萤火虫的问题 - 我认为这是另一个问题,而不是bxSlider -

我不是那个制作网站的人,而是上一个网站。开发人员逃跑了,我必须解决这个问题。

我知道这样的错误可能是因为jQuery或jQuery ui文件的路径,但我已经检查过了。

当我尝试在http://validator.w3.org验证时,它提供了一些<link>元素的错误,因为它们位于 footer.php 文件中。所以我把它们移到 header.php 并验证了它。

所以我的滑块(横向和纵向)都不起作用,我也不知道为什么我会遇到这个错误。我的意思是它与滑块有什么关系?

所以这是我的头标记,

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<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">
<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">
<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 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>

这是bxslider的脚本:

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

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

         });  

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

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

        </script>

这是easyResponsiveTabs的脚本:

 <script type="text/javascript">
            jQuery(document).ready(function () {
               jQuery('#horizontalTab').easyResponsiveTabs({
                    type: 'default', //Types: default, vertical, accordion           
                    width: 'auto', //auto or any width like 600px
                    fit: true,   // 100% fit in a container
                    closed: 'accordion', // Start closed if in accordion view
                    activate: function(event) { // Callback function if tab is switched
                        var $tab = jQuery(this);
                        var $info = jQuery('#tabInfo');
                        var $name = jQuery('span', $info);

                        $name.text($tab.text());

                        $info.show();
                      }
                   });
                });
            </script>

我知道这看起来很混乱,但我确定如果你去链接检查它可以看得更清楚。你会发现它现在看起来很糟糕而且它在网上!

如果我错过了有关此说明的任何必要信息,请告诉我,以便我可以添加。

所以我完全接受各种有用的信息。非常感谢提前!

编辑#1 我尝试过使用 noConflict

<script type="text/javascript">
    var j = jQuery.noConflict();
            j(document).ready(function () {
               j('#horizontalTab').easyResponsiveTabs({
                    type: 'default', //Types: default, vertical, accordion           
                    width: 'auto', //auto or any width like 600px
                    fit: true,   // 100% fit in a container
                    closed: 'accordion', // Start closed if in accordion view
                    activate: function(event) { // Callback function if tab is switched
                        var $tab = jQuery(this);
                        var $info = jQuery('#tabInfo');
                        var $name = jQuery('span', $info);

                        $name.text($tab.text());

                        $info.show();
                    }
                });

            });
        </script>

但它没有工作,我也遇到了同样的错误......

1 个答案:

答案 0 :(得分:1)

在尝试了很多不同的事情后,我设法解决了自己的问题。我把bxSlider的JavaScript文件,easyResponsiveTabs和脚本调用到footer.php。但是我离开了jQuery&amp; header.php中的jQuery UI文件以及滑块的css文件。

现在一切正常,标记通过了验证测试!如果你有同样的错误;

  1. 检查您的jQuery和其他JavaScript文件路径。

  2. 检查您是使用旧版本的jQuery还是不兼容 jQuery&amp;的版本jQuery UI。

  3. 不要与可能放置链接的真正愚蠢的开发人员合作 文件到footer.php ...
  4. 检查您是否有不同的实例和版本的jquery.min.js
  5. (对于我的情况)将你的bxSlider js文件放到footer.php但是 将header文件留在header.php中(用于验证,就这样吧     工作得很好)
  6. 你也可以写在这里,我可以试着帮助你。