更改 CSS 取决于用户的选择

Question

背景与问题

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

Users/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 %>

Users/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

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

<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 样式

Answer 2

您可以直接将性别信息设置为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>

更改 CSS 取决于用户的选择

Change CSS depends on what user chose

css

ruby

ruby-on-rails

ruby-on-rails-5

背景与问题

Users/edit.html.erb

Users/show.html.erb

我试过的

版本