Question

我使用Rails 4并希望在用户点击它时切换列表项的背景颜色。如何在Rails中保持更改？因此，当用户刷新页面时，切换的背景颜色仍然存在。

这是我开始的方式，但是有效，但没有保存更改：

的application.js：

$(document).ready(function() {
    $(".myitem").on("click", function() {
        $(this).toggleClass("changecolor");
    }); 
});

index.html.erb

<% @ideas.each do |idea| %>
    <li class="myitem"><%= idea.description %></li>
<% end %>

.css文件：

.changecolor {
    background-color: blue;
}

但是，由于我希望更改仍然存在，我尝试了AJAX，但现在根本无法使用它：

的routes.rb

    resources :projects do
        resources :ideas do 
            put :toggle, on: :collection
        end
    end

创建了一条路线：

 toggle_project_ideas PUT    /projects/:project_id/ideas/toggle(.:format)   ideas#toggle

在ideas_controller.rb中，我有

def toggle
  respond_to do |format|
      format.html
      format.js
  end
end

在index.html.erb

中

<% @ideas.each do |idea| %>
    <li class="myitem" id="<%= dom_id(idea) %>"><%= idea.description %></li>
<% end %>

在views / ideas / toggle.js.erb

中

$(".toggle").on("click", function() {
    $('<%= dom_id(idea) %>').toggleClass("red");
});

但上述情况根本不起作用。我怎么能创建一个非crud ajax调用？不确定我应该在哪里调用remote：true？我应该采用完全不同的方法解决这个问题吗？

Answer 1

当您更改类时，可以使用本地存储来存储类的值，将该元素的数据添加到本地存储中 localStorage.setItem（“company_id”，“1”）; 这将在客户端存储数据并从此用途中获取值： localStorage.getItem（ “COMPANY_ID”）; 请看看这个： How do I save data on LocalStorage in Ruby on Rails 3.2.8?

Rails 4：当切换列表项的背景颜色时，如何保持css更改？

1 个答案: