Question

I’m trying to assign the CSS of an element based on it’s index in a list.

Here, I stored the CSS, either ‘q-light’ or ‘q-dark’ in the variable ‘styling1’, and it worked perfectly.

    <% answers.each_with_index do |answer, i| %>
    <% styling1 = i % 2 == 0 ? 'q-light' : 'q-dark' %>

    <div class="<%= styling %>">

However, when I try to store the index in the variable ‘styling2’ here, and try to add it to another CSS class, so say the CSS for each element would be ‘otherclass 0,’ ‘otherclass 1,’ and so on, it gives me a syntax error saying that I have an unexpected ‘>’.

    <% answers.each_with_index do |answer, i| %>
    <% styling2 = i %>

    <%= f.radio_button :answer_id, answer.id%>
    <%= f.label :answer_id, answer.answer, :class => "<%= otherclass styling =>" %> 

I’m not super sure where the error’s coming from. I know that CSS classes aren’t supposed to start with numbers, but I named them with the unicode escape characters so instead of 0 it’s \30 in my css files, and that styling works elsewhere, so I don’t think it’s the numbers. Could it be that I can’t call a variable when I assign the class like “:class =>”?

Answer 1

Use "#{otherclass styling}" instead of <%= otherclass styling %>.