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

Posted 2023-05-09

【中文标题】如何在 css 类名中使用 javascript 变量并在 Rails 中通过 jquery 获取 css 颜色名

【英文标题】：How to use javascript variable in css class name and get css color name through jquery in Rails

【发布时间】：2019-01-29 13:39:10

【问题描述】：

第一季度。

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

我尝试了 for 语句，但它不起作用。

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

如何使用 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);
        

    )
)

第二季度。

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

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

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

我想导入颜色名称而不是 rgb。 （例如）返回“红色”，而不是 rgb (255,0,0)

_form.html.erb

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

【参考方案1】：

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

第二季度。 将颜色保存为 CSS 颜色名称可能有点棘手。 我建议您将 RGB 转换为 HEX（此 question 可能会有所帮助）并将其转换为带有 CSS 颜色列表的颜色名称（例如从此处 css-color-names）。

【讨论】：

谢谢！但是，如果您将直接值 (".scale-up-center" + i) 键入为 var i = 2 ;，则 for (var i = 0; i

是(".scale-up-center" + i) 还是(".scale-up-center-" + i)？

我的班级名称由 .scale-up-center0 ~ 7 组成！ ex) 我使用了它。 (".scale-up-center" + i) //// var i = 2; $ (".scale-up-center2")。单击.....这很好用它在使用变量i的for语句时不起作用。

您不能在循环内更改i 值。如果你想对第二个元素做一些特定的事情，最好这样做：for(var i=0; i<7; i++) if (i === 2) do something ...

是的。我在 scale-up-center2 上进行了测试。 //// for(var i=0; i