Изменение CSS зависит от того, что выбрал пользователь - PullRequest
Новая
       7

Изменение CSS зависит от того, что выбрал пользователь

1 голос
/ 11 апреля 2020

Предпосылки и проблемы

В моем приложении Rails пользователи могут создавать свои имена и выбирать пол. На их странице профиля их имя и пол уже указаны правильно. Далее, я хотел бы изменить цвет их имени, в зависимости от их пола, вместо того, чтобы показывать и имя, и пол, но пока это не очень хорошо работает. Буду признателен, если кто-нибудь научит меня этому.

Пользователи / правка. 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 %>

Пользователи / шоу. html .erb 

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

Что я пробовал

Я редактировал Пользователи / шоу. 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>

I добавит больше кода, если на него нужно ссылаться. Большое спасибо.

Версия

ruby 2.6.4p104 / RubyGems 3.0.3 / Rails 5.2.3

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

Вы можете установить сексуальную информацию напрямую как 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>
1 голос
/ 11 апреля 2020

Один из самых простых способов сделать это - использовать вспомогательный метод: 

<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 стили

...