Q&A
たぶん、Rails の問題だと思いますので、質問タグに追加されることをおすすめします。
https://teratail.com/tags/Ruby+on+Rails
前提・実現したいこと
jQuery初心者です。
オリジナルアプリ（ブログ的な）を作成しています。
トップページに投稿した記事を一覧表示させているのですが、その記事を下から上にフェードインして、表示させる機能を実装したいのですが、できません。
発生している問題・エラーメッセージ
consoleではこのようなエラーが出ています。
Uncaught ReferenceError: $ is not defined at index.js:2
application.html.erb
<head> <title>BBlog</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <script type="text/javascript" src="https://js.pay.jp/v1/"></script> <link rel="stylesheet" type="text/css" href="https://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head>
index.html.erb
<ul class="main"> <% @articles.each do |article| %>←ここで、一覧表示させている記事をフェードアウトさせたい <li class="list animation"> <div class="article-index-name"> <%= article.user.name %> </div> <%= link_to article_path(article.id), class:"article-index-name", method: :get do %> <div class="article-img-content"> <%= image_tag article.image, class:"article-img"%> </div> <div class="article-info"> <div class="article-index-name"> <%= article.title%> </div> <div class="article-index-name"> <%= article.category.name%> </div> </div> <% end %> </li> <% end %> </ul>
index.scss
// アニメーション要素のスタイル .animation { opacity: 0; visibility: hidden; transition: 1s; transform: translateY(30px); } // アニメーション要素までスクロールした時のスタイル .active { opacity: 1; visibility: visible; transform: translateY(0); }
index.js
window.addEventListener('DOMContentLoaded', function(){ $(window).on('load scroll',function (){ $('.animation').each(function(){ //ターゲットの位置を取得 var target = $(this).offset().top; //スクロール量を取得 var scroll = $(window).scrollTop(); //ウィンドウの高さを取得 var height = $(window).height(); //ターゲットまでスクロールするとフェードインする if (scroll > target - height){ //クラスを付与 $(this).addClass('active'); } }); }); });
試したこと
エラーの内容を調べた結果、「jQueryで読み込まれてない段階でjQuery関数を使おうとしているから」がエラーの内容だと思います。試したことは、index.jsの1行目が元は「$(function(){」だったのを「window.addEventListener('DOMContentLoaded', function(){」に変更しました。
すると、長文だったエラーが短文にはなりました。しかし、エラーは表示されているし、機能は実装できていません。どなたか教えていただけると幸いです。
回答1件
0
自己解決
application.htmlにiQueryを読み込む記述をしていなかった
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
application.html.erbに上記の記述を行なっていなかったので、index.jsが読み込まれず、うまく機能していないだけでした。
簡単なミスですいません。
投稿2021/09/06 03:40
総合スコア21
あなたの回答
tips
プレビュー
