在 ASP .Net MVC 4 页面上使用 jQuery 更改背景图像答案

【问题标题】：Changing the background-image with jQuery on an ASP .Net MVC 4 page在 ASP .Net MVC 4 页面上使用 jQuery 更改背景图像
【发布时间】：2012-08-20 18:08:04
【问题描述】：

我正在尝试做一些非常简单的事情，每五秒使用 jQuery 更改页面的背景图像。

由于该项目是一个 ASP .Net MVC 4 项目，它具有相应的 _Layout 页面、@RenderSection、@RenderBody 以及框架提供的所有这些好东西。所以我的问题是我无法弄清楚我应该定位哪个元素以及如何更改图像。

拼图如下：

在 _Layout.cshtml 文件上：

<body>
   <!-- some code that displays the navigation menu links -->

   <div id="body>
      @RenderSection("featured", required: false)
      <section class="content-wrapper main-content clear-fix">
         @RenderBody()
      </section>
   </div>
   <!-- some more code for the footer and some other irrelevant things -->
</body>

我有一个包含以下内容的样式表文件：

.main-content
{
   background-image: url("../Images/slide-1-728.jpg");
   opacity: 0.3;
}

最后的jQuery脚本如下：

var backgroundHandler = {
    fileIndex: 1,
    backgroundImageFileName: "slide-1-728.jpg",

    updateBackgroundImage: function () {
        return backgroundHandler.backgroundImageFileName.replace(/-[0-9]+-/, "-" + ++backgroundHandler.fileIndex + "-");
    },

    setBackgroundImage: function () {
        document.body.background = $("#url").val() + backgroundHandler.updateBackgroundImage();
    }
};

$(document).ready(function () {
    setInterval(backgroundHandler.setBackgroundImage, 5000);
});

背景实际上每五秒更新一次，但在导航菜单所在的部分和最初使用样式表设置的背景图像保持不变。

我尝试执行以下操作，而不是脚本上的 document.body.background 语句：

setBackgroundImage: function () {
    var imageUrl = $("#url").val() + backgroundHandler.updateBackgroundImage();
    $(".main-content").css("background-image", imageUrl);
}

但是当我这样做时，似乎什么都没有发生，图像没有更新，页面上也没有出现可见的变化。

拼图中缺少的部分是什么？

【问题讨论】：

如果你使用$(".main-content").css("background-image", "url(\"" + imageUrl + "\")");会发生什么？
@nemesv：哇，它有效！！！您能否将其作为答案并解释为什么需要这样做？

标签： jquery asp.net-mvc css

【解决方案1】：

分两步解决。

首先 - 取出背景图像的动态部分...将您的 setBackgroundImage 函数更改为类似

$("body").css("background-image", "url(some absolute url to an image);");

第二 - 重新添加动态片段，确保 imageUrl 变量中包含指向有效图像的路径。

【讨论】：