0

ユーザーがログインしているときに、div ボタンの色を変更する必要があります。

ここに画像の説明を入力

ユーザーがログインしたら、img の「今すぐ再生」ボタンのように、「ダウンロード ボタン」が赤色で表示されるようにします。

これは今のコードです：

      #play_buttons
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"

.button左側の「今すぐダウンロード」ボタンのクラスで:id => "ho_roulette"、右側の「今すぐプレイ」ボタンのスタイルを指定します。

これは、ユーザーがログインしているときに [今すぐ再生] ボタンのような [今すぐダウンロード] ボタン スタイルを実現するための私のソリューションです。

       #play_buttons
     - if logged_in 
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now" :id => "ho_roulette"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"
    - else 
      #instant_play.play_button
        %p
          = "#{t :"asiaplus.download_client"}"
        .button
          = "#{t :"asianplus.download_now"}" 
      #play_now.play_button
        %p
          %span.highlight
            = "#{t :"asiaplus.web_based"}"
          = "#{t :"asiaplus.live_dealer"}"
        %a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
          = "#{t :"asiaplus.play_now"}"

:id => "ho_roulette"基本的に、ユーザーがログインしているときに div ボタンに追加する条件ステートメントを使用しました。

この解決策は正しいですか？ステータス クラス アクティブを他のソリューションとして使用することもできると思いましたが、SASS ファイルには触れたくありませんでした。

4

2 に答える 2

3

私があなたの解決策について修正する2つのことがあります：

  1. HTMLidタグは一意である必要があるため、同じIDを持つ2つの異なる要素を使用しないでください。あなたは間違いclassなく代わりに使いたいです。

  2. ここではたくさんのコードを繰り返しています。タグ内で条件付きを使用し、HAMLがnil値を持つキーを無視するという事実を利用する方がはるかに良いでしょう。

    play_buttons
  #instant_play.play_button
  %p
    = t :"asiaplus.download_client"
  .button
    = t :"asianplus.download_now", :class => ("active" if logged_in)
  #play_now.play_button
  %p
    %span.highlight
      = t :"asiaplus.web_based"
    = t :"asiaplus.live_dealer"
  = link_to t("asiaplus.play_now"), live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => ["button", ("active" if logged_in)], :title => t('asiaplus.play_now'), :id => "ho_roulette"}
于 2013-02-24T19:17:54.607 に答える
2

あなたの解決策は良いです。条件付きCSSが最も簡単なソリューションです。しかし、あなたはそれを乾かすべきです。if / elseステートメントにすべてを含める代わりに、単にあなたのためにそれを行ってくださいid：

  #instant_play.play_button
    %p
      = t(:"asiaplus.download_client")
    .button
      = t(:"asianplus.download_now"), :id => ('ho_roulette' if logged_in)
  #play_now.play_button
    %p
      %span.highlight
        = t(:"asiaplus.web_based")
      = t(:"asiaplus.live_dealer")
    %a{:href => live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => "button", :title => t(:'asiaplus.play_now'), :id => "ho_roulette"}
      = t(:"asiaplus.play_now")

考慮する：

  • @apneadivingのアドバイスに従って、を再フォーマットする必要がありますt()。

  • @charleycは、idユニークであるという点で100％正しいです。彼のソリューションを使用してSASSファイルを変更することを検討してください...そしてidCSSルールを定義するためのタグの使用へのアプローチ。状態（「アクティブ」や「ho_roulette」など）は常にCSSクラスである必要があります。

于 2013-02-24T19:13:54.997 に答える