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

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

ただいまの
回答率

89.13%

css 表示を切り替える方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 548

riamk

score 45

前提・実現したいこと

Rails4

簡単なQ&Aサイトを作成しました。
そこで解決した質問は「解決済み」
未解決の時は「未解決」
とクリックすると表示が切り替わるボタン(リンク)を作成しました。

このボタンは、questionsテーブルに is_solved カラムをbooleanで作成してAjaxで表示が切り替わるようにしています。

今回実現したいのは、このボタンが未解決の時は黒色。
解決済みになったら赤色。
などと表示されている状況によって文字の色を変えたりしたいです。

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

<p class="解決済み">...</p>
<p class="未解決">...</p>
みたいにすれば、状況によって表示のデザインを切り替えられるのかな?
と思ったのですが、この解決済みや未解決に入れるデータが分からず実現できずにいます。

どのようにしたら実現できるのか教えてください。

該当のソースコード

現在ボタンは以下のような記述で作成して表示しています。

question_controller.rb

# 略
  def make_resolved
     @question = Question.find(params[:question_id])
      if @question.update(is_solved: true)
         //
      end
      respond_to do |format|
       format.html{render :show}
       format.js{}
     end
  end
# 略
end

views/questions/show.html.erb

# 略
<div id='ajax_button'>
  <%= render :partial=>'make_resolved' , locals: {question: @question} %>
</div>

views/questions/_make_resolved.html.erb

<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true}) %>

views/questions/make_resolved.js.erb

$("#ajax_button").children().remove();
$("#ajax_button").append('<%= escape_javascript render  :partial => "make_resolved" ,locals: {question: @question},:layout => false %>');

説明が分かりづらい点もあるかもしれませんが、よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

初心者マークがついていませんが解説します。
まず基本的なことから、RubyonRailsのwebアプリは下記の4つから構成されます。

  • html5=>HyperText Markup Languageインターネットの黎明期に学者が論文を共有するために作られた言語で、<tag></tag>で要素を管理する、それのversion5、デスクトップアプリに劣らないUIを備えた最新のもの
  • RubyonRails=>webフレームワークの一つ、データ(DB)とユーザーからのアクションを結びつけhtmlを作成する。
  • javascript=>webブラウザ上で動作する、軽量言語webブラウザ上で完結した動作をしたりwebフレームワークの動きを助けデータをやりとりしたりする
  • stylesheet=>htmlにもデザインの機能はあるが、それを分離し、構造化したもの、通常、htmlのtagのclassやidを頼りにデザインを適用する。

web開発をしっかりやろうと思ったら最低限これら4つを勉強しないといけません。

で、以上を踏まえるとまず、質問のタグはRubyやRuby on Railsではありません。
html CSS等で質問するべきです。

<p class="解決済み">...</p> 
<p class="未解決">...</p> 
を何にすべきかわからないとありますが、当たり前です。
CSSに自分でこのclassの時はこの色にすると指定してそれを読み込み
適用するからです。
bootstrapのようなフロントエンドWebアプリケーションフレームワークを適用していれば、
class名だけで変化をつけられますが、基本的にcssを勉強して自分でやルものだと御考えください。

また、

<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true}) %>


の記述も問題です。
このままでは、is_solvedによって、メッセージしか変化しませんしclass等が変化するようにしないとcssが適用されません。そもそも、解決済みなのにリンクが推せるって…。 

しかし、今回の場合だけ、上記の学習をすっ飛ばしてやる方法があります。

<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true},question.is_solved ? :style=>"color:red":style=>"color:black") %>


しかし、これより踏み込んだデザインにするには、基礎からしっかり学ぶ必要があります。
RubyonRailsは乗っけは本当に簡単ですが、細かくカスタマイズして想像通りの物を作るには
やはり多岐にわたる知識と技術が必要です(それでも他のフレームワークよりだいぶ簡単ですが…)
頑張ってください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/15 22:50

    ご回答及び、ご指摘ありがとうございます。
    質問に関してはhtml、cssのタグに変更します。

    また、解決済みなのにリンクが推せるっていうのも変なので今後修正して見直していこうかと思います。

    cssなどまだまだ知識不足なところが多いので、今後がcss、htmlに関しても勉強していこうと思います。

    キャンセル

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる