Javascript 更新操作后Rails中的视图背景

我试图在调用控制器操作时更新一个元素背景图像，但无法确定它。在我看来，我有以下标签

<%= link_to '', color_animal_path(@article), method: :post, :id => "animal-image", remote: true %>

我有一个名为color.js的js文件，在app/assets/javascripts中包含以下内容

$('#animal-image').css('background-image', 'url("green.jpg")');

元素的css如下所示

#animal-image {
  float: left;
  width: 28px;
  height: 28px;
  background: grey;
  background: url('red.png') no-repeat;
  background-size: contain;
}

视图以红色图像正确渲染，单击图像调用控制器，我可以看到puts输出，但是元素背景图像没有更新…我希望有人能提供帮助，我是否在正确的轨道上，我是否遗漏了什么

---

谢谢

调用UJS有什么特别的原因吗？为什么不在客户端jQuery中完成这一切

即使有原因，例如颜色需要由服务器动态设置，或者您希望跟踪事件，我建议在客户端对其进行隔离测试，直到它正常工作，然后重新集成Rails UJS组件

例如，首先为绿色图像添加一个新的CSS类：

#animal-image.updated {
  background-image: url('green.png');
}

然后添加一些JS：

$( "#animal-image" ).click(function() {
  $(this).toggleClass('updated');
});

---

如果一切正常，那么您可以将其全部放回color.js中，然后在浏览器的开发工具中验证响应是否正确并正在评估。

点击背景是否有任何变化？我只是想知道图像的路径是否需要调整？没有任何背景变化，仍然显示原始图像…谢谢这是一个伟大的想法，工作非常完美。非常感谢您的帮助。如果您有时间，请快速跟进问题。我正在渲染部分内部的链接，因此我对视图进行了多次渲染。js只针对第一个更改第一个，单击所有其他更改第一个图像。我如何才能使它更改正确的部分id？@eclipse1203:这是否意味着您在HTML中多次重复使用同一id？如果是这样的话，这也许可以解释你最初的问题。id在HTML文档中应该是唯一的，因此请尝试在每次迭代中添加一些内容以使其唯一，例如，在最基本的级别上，您可以将@article id附加到id名称中。或者你最好让它成为一门课？好的，是的，我用的是同一个id…很好。我将项目id附加到id元素，因此它是唯一的，现在在控制器方法颜色中，我可以通过@id=params[：id]获得值。如何将此值传递到color.js？我的彩色js文件是$animal image.toggleClass'updated'；我在第一篇文章中用respond_调用js，FYIYou必须修改color_animal_路径以传递它，然后在控制器/视图中获取参数值。但是-如果每个元素的逻辑相同，我会使用类而不是id。那么它应该是简单的，不需要任何更改。

$( "#animal-image" ).click(function() {
  $(this).toggleClass('updated');
});