Question

我需要在用户登录时更改div按钮的颜色。

enter image description here

一旦用户登录，我希望他看到红色的“下载按钮”，就像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文件。

Answer 1

关于您的解决方案，我会修改两件事：

HTML id标记应该是唯一的，因此您不应该有两个具有相同ID的不同元素。您肯定希望使用class。

你在这里重复了很多代码。使用标记内部的条件更好，并利用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"}

Answer 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()。
对于id唯一的问题，@ charleyc是100％正确的。考虑使用他的解决方案并更改您的SASS文件......以及使用id标签定义CSS规则的方法。状态（如'active'或'ho_roulette'）总是是CSS类。

Ruby中的CSS条件语句

2 个答案:

要考虑：