如何在css类名中使用javascript变量并通过Rails中的jquery获取css颜色名称

Question

一季度。

我总共有 7 个 div（类名：scale-up-center0 ~ 7），我想使用 javascript 变量表示数字 1 到 7。

我尝试了 for 语句，但没有用。

当单击 scale-up-center0-6 时，我希望 scale-up-center7 改变颜色。

如何将 javascript 变量用于 css 类名？

不工作的代码

$(document).ready(function() {
        for(var i=0; i<7; i++) {
        $(".scale-up-center-<%=i%>").click(function() {
            var color = $(".scale-up-center-<%=i%>).css("background-color");
            $(".scale-up-center7").css("background-color", color);
            $("#post_color").val(color);
        }

    })
})

Q2。

我通过jquery导入了css属性（background-color）并将其存储在color列中。

并通过表单的输入显示颜色。 但是，它以 rgb (255,0,0) 的形式表示。

我在数据库中有一个颜色列，但它是字符串类型，而 rgb() 没有。

我想导入颜色名称而不是 rgb。 (ex) 返回 "red", 而不是 rgb (255,0,0)

_form.html.erb

  <div class="field">
    <%= form.label :color %>
    <%= form.text_area :color, id: 'post_color' %>
  </div>

Answer 1

一季度。 尝试使用$(".scale-up-center-" + i)而不是$(".scale-up-center-<%=i%>")

Q2。 将颜色保存为 CSS 颜色名称可能有点棘手。 我建议您将 RGB 转换为 HEX（这个问题可能会有所帮助）并使用 CSS 颜色列表将其转换为颜色名称（例如从这里css-color-names ）。