獲取CSS屬性以在Rails變量和數據庫中使用

Question

單擊多個按比例放大的div時，得到了css屬性。

但是，我想將導入的css屬性存儲在Rails變量和DB中。

我想要的最后一件事是在單擊它們時獲取Css屬性，並讓它們自動填充表單。 此數據存儲在稱為顏色的列中。

我嘗試的代碼是：

$(document).ready(function() {
        $(".scale-up-center").click(function() {
            var color = $(".scale-up-center").css("background-color");
            $(".first_scale").css("background-color", color);
        })
    })

我聽說您可以使用ajax，但是當您查看指南時，它與我想要的有所不同。

主視圖圖像

在此處輸入圖片說明

Answer 1

您的方法有點脆弱。 更改CSS顏色后，數據庫中仍然有舊的無效顏色。 用戶還可以操縱表單值以注入不需要的顏色。 您不能完全分離自己的表示形式和邏輯。

而是在模型中為所有可用顏色定義一些常數。 還要驗證傳入的值是有效顏色之一：

class Post < ActiveRecord::Base
  COLORS = ["none", "red", "green", "blue"]
  validates :color, inclusion: { in: COLORS }
end

在您的視圖中，讓用戶通過單選按鈕選擇顏色：

<%= form_for @post do |f| %>
  <%= label :color %>
  <% Post::COLORS.each do |c| %>
    <div class="color-<%= c %>">
      <%= f.radio_button :color, c %> 
    </div>
  <% end %>

  <%= f.submit "Update" %>
<% end %>

現在，您可以在CSS中定義表示形式：

form .color-red {
  background-color: #FF0000;
}

// ...

您仍然可以添加一些JavaScript來為整個文本字段上色。