前提・実現したいこと
外部のtest.jsファイルをhtmlファイルで呼び出し文字色を赤に変化させる。
発生している問題・エラーメッセージ
railsでアプリを作っています。
jqueryを使い文字色を赤に変化させたいのですが、文字色が変わるのは最初にページを読み込んだ時のみで、ページを移動すると、元の黒色に戻ってしまいます。macの(command + R)で再読み込みすると赤になりますが、ヘッダーのリンクで違うページへ行き戻ってくると黒になっているという感じです。
app/assets/javascript/test.js
のtest.js
ファイルに文字色を赤にする処理を書き、show.html.erb
から呼び出す形にしたいです。
何が原因でこうなってしまうのか、どなたか解る方いらしたら教えて頂けないでしょうか、、
大変初歩的な質問で申し訳ありません。汗
該当のソースコード
ruby
1show.html.erb 2 3<div id="js-target">ここの文字色が変わります</div> 4
test.jsファイル $(function(){ $('#js-target').css('color', '#ff0000'); });
application.js // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require turbolinks //= require_tree . //= require jquery //= require bootstrap
application.html.erb <head> <title>Port</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"> </script> <![endif]--> </head>
gemfile source 'https://rubygems.org' gem 'rails', '~> 5.1.6' gem 'rails-i18n' gem 'bootstrap-sass' gem 'bcrypt' # 今回追加するgemです gem 'faker' # ユーザー作成 gem 'will_paginate' gem 'bootstrap-will_paginate' gem 'puma', '~> 3.7' gem 'sass-rails', '~> 5.0' gem 'uglifier', '>= 1.3.0' gem 'coffee-rails', '~> 4.2' gem 'jquery-rails' gem 'turbolinks', '~> 5' gem 'jbuilder', '~> 2.5' gem 'jp_prefecture' gem 'jquery-rails' gem 'rinku' gem 'carrierwave' gem 'rmagick' gem 'roo'
試したこと
直接show.html.erb
にtest.js
の処理を書き実行したところ、文字色も変わり、ページを移動しても色が赤になっていましたが、外部からjsファイルを読み込むと色が変化するのは最初だけでした。
またtest.jsファイルに$ is not defined jquery
とエラーが出ます。調べてみるとjqueryが読みこまれていないのに$などのjqueryの関数を使おうとしている事が原因だとわかりました。
読みこみていないなら色が変わるはずないと思うのですが結局わからず、、汗
!△$(function(){
!△$('#js-target').css('color', '#ff0000');
});
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。