草庐IT

javascript - TypeError : j(. ..).bxSlider 不是函数 - slider 不工作

coder 2023-08-10 原文

我正在研究 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 解决了问题;但这对我不起作用。

顺便说一句,所有的 slider 都是用一个叫做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>

最佳答案

在尝试了很多不同的事情之后,我设法解决了我自己的问题。我已将 bxSlider、easyResponsiveTabs 的 JavaScript 文件和调用它们的脚本放入 footer.php。但我将 jQuery 和 jQuery UI 文件以及 slider 的 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 中(用于验证,这样效果很好)

也可以写信给我,我会尽力帮助

关于javascript - TypeError : j(. ..).bxSlider 不是函数 - slider 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23502853/

有关javascript - TypeError : j(. ..).bxSlider 不是函数 - slider 不工作的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  3. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词,但有时效果很好,在某些情况下会出现此错误?这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊,我找到了!gsub!是一个非常奇怪的方法。首先,它替换了字符串,所以它实际上修改了

  8. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  9. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是,在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  10. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数?(我使用Ruby才几个小时,所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁?我可以只

随机推荐