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

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

  1. HTMLid标签应该是唯一的，因此您不应该有两个具有相同 ID 的不同元素。你肯定想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 文件......以及使用id标签定义 CSS 规则的方法。状态（如 'active' 或 'ho_roulette'）应该始终是 CSS 类。

于 2013-02-24T19:13:54.997 回答