Javascript 单击rails按钮以永久更改数据模型和css

因此，我正在为客户创建一个照片校对web应用程序。我希望他能够浏览网站上的图片，在每张图片下都有一个“批准”按钮，他可以点击该按钮，图片边框将变为绿色，表示这有利于出口

现在我对JS/Jquery的了解非常有限，但我知道这可能比前端工作更深入，因为我希望在关闭浏览器后看到这些更改，我认为这需要后端和前端解决方案

我正在考虑在我的图像模型下创建一个布尔属性，当您单击“批准”按钮时，它会将布尔值切换为true，这将使css类变为绿色。rails是否有办法检测布尔值并相应地更改css？我希望能够看到我的客户所做的更改

---

如果您对我的方法有任何反馈/建议，或者有更好的方法，我将不胜感激。谢谢

首先在images表中添加一个类型为boolean的已批准列 在你的图像控制器和这些动作上

def approve
@image =Image.find(params[:id])
@image.update_column(:approved,true)
respond_to do |format|
format.js
end
end

在routes中添加这些方法

resources :images do
member do 
put :approve
end   
end 

 $("body").on("click",".approve_me",function(e){
 e.preventDefault();
 $(this).parents(".image").find("img).css("border-color","green");
 });

在html中

 <div class="image">
<img src="<%=@image.source%>" />
 <%= link_to "approve",approve_image_path(@image),:remote=>true,:method=>"PUT",:class=>"approve_me"%>

</div>

---

我想你就快到了

首先-是的，在运行时使用javascript更改css将立即更改dom元素的外观

在客户端-您希望向用户指示选择了哪些图像，但还需要在提交表单中存储每个元素的批准值

在Rails中，通常创建隐藏的输入元素来存储额外的数据。给定手头的任务-他们可以存储0/1的值-拒绝/批准。您可以提出自己的命名图像/选择值的约定

然后，在视图中，将onclick侦听器添加到指向javascript函数的图像中：

1） 检查是否已选择单击的元素， 2） 更改当前元素的css， 3） 正在更新该元素的隐藏输入值

这是一个虚拟演示-

稍后，您可以从控制器中的

params

获取批准/拒绝的值，如（见下文）

如果在构建视图时希望分配css类，并根据

已批准的

标志值，可以执行以下操作：

 <img id="image_<%= image_id %>" src="<%= image_item.path"  class="<%= (image_item.approved.to_i == 1) ? 'approved_img' : 'non_appr_img' %>" %>
 <input id="image_<%= image_id %>_app_flg" type="hidden" value="<%= image_item.approved %>" />

*你需要 此处

：images

是控制器，

approve\u images

是控制器中的函数，表单将提交到该控制器（包括在路由中），

@images

是一个包含图像数据的数组（来自您的模型），您在渲染视图之前已在控制器中准备好。我假设图像有ID和批准的属性

这将在视图中生成如下dom元素：

<input id="images_IMAGEID_appproved" name="images[IMAGEID_approved]" type="hidden" value="1" />

img_approved = params[:images][IMAGEID+"_approved"]

最后，您可以将该值存储到数据库中。祝你好运！：）

---

---

我省略了很多更基本的东西，但我认为这个问题太宽泛了，有大量的资源详细介绍了如何创建、读取、编写模型、为视图准备数据等。如果没有，请开始使用

感谢所有帮助我回答以下问题的人！我想出了一个我非常满意的解决方案，我想我会分享它，希望它能帮助其他人

问题：我正在寻找一种可以永久更改数据模型的AJAX解决方案。我希望有人能够切换/突出显示页面上的某些项目，并将这些更改保存在后端，以便我以后查看

这需要一个用于用户界面的前端ajax解决方案和后端解决方案，这样最终的更改将保存在数据模型中，这样当我稍后加载站点时，我可以看到他所做的更改

我的解决方案（在下面回答的人的帮助下）：

• 后端-我创建了一个链接，按下该链接时，将在我的模型中切换属性true/false
• 前端-为了给客户端一种实时的感觉，我必须设置链接来执行ajax请求，并相应地更改css

我的控制器：

  def approve
    @pipe = Pipe.find(params[:id])
    respond_to do |format|
        if @pipe.toggle!(:approved)
            format.html { redirect_to root_url }
            format.js
        else
            format.html { render :index }
        end
    end
  end

My pipes表具有approved:boolean属性

我的approve.js.erb文件（我使用div_for（@pipe）将每个管道包装在一个div中）：

我的触发器链接（使用上述辅助对象）：

---

再次感谢那些帮助提供答案的人。这是一个我非常满意的解决方案。我知道它可能需要一些重构方面的帮助。如果有人有建议，我会很乐意听到的！

嘿，谢谢你的建议。我真的很想知道你会如何处理后端，因为我希望我的客户点击并进行修改这些变化，但我也想在我自己的浏览器上看到。实际上，你的浏览器（用户代理）也是客户端：）问题变得相当广泛，我会更新我的答案，但最好问一个更具体的问题或从教程开始（大量免费提供）如果你不确定如何处理这个问题，请允许我提两点意见。1对问题进行重大修改或在回答中解释问题是不好的。原始问题与您在问题中给出的更新有很大不同。请考虑编辑相应的问题（虽然这会使给出的答案不太相关）。2.对于那些花时间试图提供帮助的人来说，“谢谢”是非常感谢的，但投票系统是表明答案是否确实有贡献的最佳方式。感谢反馈。我很抱歉，如果我没有像我应该的那样清楚地表达这个问题，但这是我一直在寻找的解决方案。它是模糊的，因为一开始我不知道如何着手解决这个问题。虽然我很感激这些答案，但它帮助我找到了答案。既然我知道我想要什么，我就试着把这个问题改得更清楚些。

  def approve
    @pipe = Pipe.find(params[:id])
    respond_to do |format|
        if @pipe.toggle!(:approved)
            format.html { redirect_to root_url }
            format.js
        else
            format.html { render :index }
        end
    end
  end

<% if @pipe.approved? %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid green');
        $('div#<%= dom_id(@pipe) %>').children('a').text('un-approve');
<% else %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid white');
        $('div#<%= dom_id(@pipe) %>').children('a').text('approve');
<% end %>

def approve_text(approvable)
    approvable.approved? ? 'un-approve' : 'approve'
end

<%= link_to approve_text(pipe), approve_pipe_path(pipe), remote: true, method: 'PUT', class: approve_text(pipe) %>

  resources :pipes do
    member do
        put :approve
    end
  end