更改 CSS 取决于用户选择的内容

Question

背景与问题

在我的 Rails 应用中，用户可以创建自己的名字并选择性别。在他们的个人资料页面上，他们的姓名和性别都已正确显示。接下来，我想根据他们的性别改变他们名字的颜色，而不是同时显示名字和性别，但到目前为止效果不佳。如果有人教我，我将不胜感激。

用户/edit.html.erb

       <%= form_tag("/users/#{@user.id}/update", {multipart: true}) do %>
        <table>
          <p>User name</p>
            <input name="name" value="<%= @user.name %>">
          <p>Sex</p>
            <select name="sex" value="<%= @user.sex %>" selected><%= @user.sex %>>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
          <input type="submit" value="Submit">
        </table>
       <% end %>

用户/show.html.erb

    <div class="user">
      <div class="username"><%= @user.name %></div>
      <div class="sex"><%= "(" + @user.sex + ")" %></div>
    </div>

我尝试过的

我像这样编辑了Users/show.html.erb，但它不起作用。

      <div class="username">
        <%= @user.name %>
          <% if @user.sex == "Male" %>
            <% @user.name color: blue; %>
          <% elsif @user.sex == "Female" %>
            <% @user.name color: red; %>
          <% else %>
            <% @user.name color: black; %>
          <% end %>
      </div>

如果需要参考，我会添加更多代码。非常感谢。

版本

ruby 2.6.4p104 / RubyGems 3.0.3 / Rails 5.2.3

Answer 1

您可以直接将性别信息设置为classname。

<style>
  .username span{
    color: black;
  }
  .username span.Male{
    color: blue;
  }
  .username span.Female{
    color: red;
  }
</style>
<div class="username">
  <span class="<%= @user.sex %>"><%= @user.name %></span>
</div>

Answer 2

最简单的方法之一是使用辅助方法：

<div class="username #{username_color(@user.sex)}">
  <%= @user.name %>
</div>

在助手中，user_helper.rb

def username_color(sex)
  case sex
  when "Male" then "blue"
  when "Female" then "red"
  else "black"
  end
end

记得调整你的 CSS 样式