Railsでcssの値を切り替える

自分のポートフォリオを触っているときに、ちょっと表示の有無を設定したいと思いました。
今回表示の切り替えをしていのは、ログインや新規登録を促す画面です。
私が作っているのは写真投稿サイトです。タグを用いて検索した場合はこの表示を消したいと思います。
ログインなしでも投稿の閲覧はできるため、あってもいいかなと思いました。

実装

cssの切り替えですが、基本的にはjavascriptを用います。
最低限のjavascriptで簡単にできないかなと考えました。

javascriptで何か動きをするにはイベントを設定しないといけません。
例)　click, dbclick, onload,,,,,

イベント一覧はこちら

javascriptでcssの値を変えるには

$('cssセレクタ').css('プロパティ : 値')

#change-colorクラスの値を赤にしたい時

$('.change-color').css('color : red')

と書きます。
私が想定しているのは特定のページに遷移したとき、ロードされたときに表示を消すようにしたい

使用するイベントはonLoad

window.onload = function() {
  $('.cssセレクタ').css('display : none')
}

とします。

ただこれだと、リロードが入るために表示が消されるので、ちょっと工夫します。

さっきのコードはcssセレクタに新しい処理を追加するという動作なので、

cssセレクタの方も、特定の条件で付与するようにします。

ここでどうやって値を渡そうかなと考えたときに、controllerから渡すことを考えました。
そしてどうやって渡した値を使うのかというと

<div class="container bg-light">ここに追加したいとしたら
↓
<div class="container bg-light <%= @selector %> ">
@selectorの中にcontrollerからもらった値(cssセレクタ)を追加します

controllerでは,

posts_controller.rb

def index
  if params[:keyword]
    @selector = "display" ← 適当に名前をつけてください
  end
end

ここではindexアクションが呼ばれたときにkeywordが送られていたら、@selectorにdisplayというcssセレクタを代入するとなります！

ここでjsのファイルを書き換えると

javascript

window.onload = function() {
  $('.display').css('display : none')
}

これでcssセレクタと、その中身を一緒に送ることができます！