TypeError，不是Rails应用程序中的函数 [英] TypeError, is not a function in Rails app

问题描述

我对js和jquery还是很陌生，并且我想为我的Rails应用做一些非常简单的事情:我想每3个图像之间切换2张图像，并且具有淡入淡出的效果.问题是我遇到了一个错误，但不知道如何解决(这是我所读到的典型错误，但运气不佳，无法修复).我用jsfiddle测试了我的代码，它运行良好，但是当我运行我的应用程序时，我在Web控制台中收到此错误:

I'm quite new to js and jquery and I'm trying to do something very simple for my Rails app: I want to switch between 2 images every 3 seoncs with a fading effect. The problem is that I'm obtaining an error but don't know how to solve it (it's a typical error from what I've read but I had no luck in fixing it). I tested my code with jsfiddle and it works fine but when I run my app I get this error in the web console:

TypeError: $("#img").fadeOut is not a function.

这是我的代码:

HTML代码

<div class="container p-5">
    <div class="row">
        <div class="col">
            <h2 class="display-5 mb-4">Title here</h2>
            <p class="lead">Lead</p>
        </div>
        <div class="col">
            <img id="img" src="http://localhost:3000/images/pdf_template.png" />
        </div>
    </div>
</div>

jquery代码

<script type = "text/javascript">
      var images = [];
      images[0] = "http://localhost:3000/images/pdf_template.png";
      images[1] = "http://localhost:3000/images/watermark_template.png";

      var x = 0;
      setInterval(displayNextImage, 3000);

      function displayNextImage() {
          x = x < images.length - 1 ? x : 0;
          $("#img").fadeOut(300, function(){
            $(this).attr('src', images[x]).fadeIn(300);
          })
          x++;
      }
</script>

正如我所说，代码在jsfiddle中运行，所以我怀疑问题出在我的Rails应用程序上，但我没有在Google上找到任何与此相关的东西. jQuery代码位于文件开头的application.html.erb中.我设法使其他一些jQuery代码有效(自动图像更改，但没有褪色效果)，但没有任何问题，但这是行不通的.

As I said, the code is working in a jsfiddle, so I suspect the problem is coming from my rails app but I didn't find anything relevant on google about it. The jquery code is located in my application.html.erb, in the head of the file. I managed to make some other jquery code works (an automatic image change but without fade effect) without any issue but this won't work.

我正在使用Rails 5.2.3，jquery-rails 4.3.5，jquery 3.2.1

I'm using Rails 5.2.3, jquery-rails 4.3.5, jquery 3.2.1

感谢您的任何帮助.

推荐答案

我在这里回答自己的问题. @dbugger指出，将jquery中的函数包装在文档就绪块中是一个好习惯.所以这就是如果有人需要的话:

I'm answering my own question here. @dbugger pointed out that it was a good practice to wrap functions in jquery in a document ready block. So here it is if anyone needs it:

jquery代码

jQuery( document ).ready(function( $ ) {
        var images = [];
        images[0] = "http://localhost:3000/images/pdf_template.png";
        images[1] = "http://localhost:3000/images/watermark_template.png";

        var x = 0;
        setInterval(displayNextImage, 3000);

        function displayNextImage() {
            x = x < images.length - 1 ? x : 0;
            $("#img").fadeOut(300, function(){
              $(this).attr('src', images[x]).fadeIn(300);
            })
            x++;
        }
});

如您所见，唯一的变化是添加了jQuery( document ).ready(function( $ ) {});块.

As you can see, the only change here is the addition of the jQuery( document ).ready(function( $ ) {}); block.

这篇关于TypeError，不是Rails应用程序中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！