質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1418閲覧

jqueryを使い文字色を変化させたいが一瞬しか変わらない。

jun3030

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/02/26 07:57

前提・実現したいこと

外部のtest.jsファイルをhtmlファイルで呼び出し文字色を赤に変化させる。

発生している問題・エラーメッセージ

railsでアプリを作っています。

jqueryを使い文字色を赤に変化させたいのですが、文字色が変わるのは最初にページを読み込んだ時のみで、ページを移動すると、元の黒色に戻ってしまいます。macの(command + R)で再読み込みすると赤になりますが、ヘッダーのリンクで違うページへ行き戻ってくると黒になっているという感じです。

app/assets/javascript/test.jstest.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.erbtest.jsの処理を書き実行したところ、文字色も変わり、ページを移動しても色が赤になっていましたが、外部からjsファイルを読み込むと色が変化するのは最初だけでした。

またtest.jsファイルに$ is not defined jqueryとエラーが出ます。調べてみるとjqueryが読みこまれていないのに$などのjqueryの関数を使おうとしている事が原因だとわかりました。
読みこみていないなら色が変わるはずないと思うのですが結局わからず、、汗

!△$(function(){
!△$('#js-target').css('color', '#ff0000');
});

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

turbolinksのせいですかね。
ページ移行する時にjQueryが上手く働かない事があります。

turbolinks jQueryで調べると沢山出てくるのですが、
下記の記事がやってる事も同じで、turbolinksの障害についても書いてるので良いかもです。

【Rails入門説明書】 jQueryの導入方法について解説
https://web-camp.io/magazine/archives/17690

【Rails】turbolinksやAjaxの影響でjQueryが正常に動作しないとき
https://qiita.com/nsy_13/items/51d8a156d71964a135f4

投稿2020/02/28 19:16

aocattleya

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問