如何在 Rails 中从 JQuery 更改 CSS（背景图像）？答案

【问题标题】：How to change CSS (background-image) from JQuery in Rails?如何在 Rails 中从 JQuery 更改 CSS（背景图像）？
【发布时间】：2012-11-17 14:22:34
【问题描述】：

我正在尝试更改我的 Rails 应用程序中 body 标记中的背景图像。我已经从 items.js.coffee （我有名为 items 的表）和 application.js 中尝试过它。我不能让它工作。

我已尝试更改背景颜色，这适用于 application.js，但不适用于 items.js.coffee。

所以我的问题是：如何更改背景图片以及 CSS 中的所有更改都必须从 application.js 完成吗？

items.js.coffee：

$ ->
    $(document).ready ->
        if something
            $("body").css "background-image", "url(rails.png)"

bootstrap_and_overrides.css.less：

body { 
    padding-top: 60px;
    background-color: black;
    background-image:url('HypeTrans.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: 50% 50%;
}

【问题讨论】：

所以我很清楚：当您的代码位于 @ 987654325@ 或items.js.coffee，但是当代码（否则相同）在items.js.coffee 中时，您不能更改背景图像？绝对不是需要从application.js 进行 CSS 操作的情况，只是在页面加载期间（或更常见）执行更改的 JS。
我发现了这个问题并解决了它（在下面的评论中描述）。我现在遇到的问题在对下面答案的评论中进行了描述。请看一下，看看你是否知道问题可能是什么。问候
$ -> 和 $(document).ready -> 是同一个东西，你不需要两者。
$ -> 和 $(function(){ 不一样吗？

标签： jquery css ruby-on-rails coffeescript background-image

【解决方案1】：

似乎最可能的解释是，如果您使用资产管道，您的布局或 application.js 中没有包含 items.js 文件。

在开发模式下，查看渲染页面的源代码*并确认页面中包含 items.js。如果不是，并且假设您使用的是 Rails 3.1+ - 我建议您查看 Asset Pipeline Rails Guide 以了解如何将文件添加到您的清单。

我建议这样做，因为无论您是否使用资产管道，它都应该可以工作，因为在您的 application.js 清单中的开发模式文件是单独包含的。

更新

与此相关的是，如果您指的是从资产管道提供的资产，它们将出现在 /assets 下，因此您的代码应该是

$("body").css "background-image", "url('/assets/rails.png')"

【讨论】：

由于某种原因 //= require_tree . 不在 application.js 中，我添加了它，现在我可以更改背景颜色（感谢指出），但我仍然无法更改背景图像。这有效：$("body").css "background-color", "red"，但这不起作用：$("body").css "background-image", "url(Hype.png)"。这里有什么问题（我有一张名为 Hype.png 的图片）？
查看我上面的更新：您的 app/assets/images 目录中是否存在炒作？
是的！谢谢卢克-就是这样！ :)

【解决方案2】：

我向你展示了一种用 javascript 编写 css 代码的方法，你可以试试这个

$(function(){
    if(something){
        $("body").css({
            'background-image':'url(path of the image)'
        })
    }
})

这样就可以写css了

【讨论】：

【解决方案3】：

你为什么不把 background-image 更改为背景

bootstrap_and_overrides.css.less

所以让它看起来像这样

body { 
padding-top: 60px;
background-color: black;
background:url('HypeTrans.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

}

【讨论】：

嗨，这是因为图像只覆盖了屏幕的一小部分，我希望背景颜色为黑色。（如果我只使用背景标签，背景颜色会变白。）