- 不像这个小提琴那么简单？

Question

这里的小提琴http://jsfiddle.net/mjmitche/KvwGw/21/，当你提交表单时，会出现一个新的表单，并且背景颜色也会发生变化。

在 wordpress 博客上，我试图在提交表单时更改背景图片。图片在这里上传到服务器

www.example.com/wp-content/themes/thesis_18/custom/images/strawhat.jpg

然后像这样使用 css（在我的自定义 wordpress 主题中）显示

body.custom {
    background: #8db6b6 url('images/subway.jpg') repeat; 
}

在我的愚蠢中，我最初尝试使用下面的代码使背景图像更改不成功，但是由于背景图像已上传到服务器，我现在意识到/认为需要一些 Ajax 来更改提交时的背景图像，但我一直不知道该怎么做

有谁知道我将如何进行 ajax 调用来做到这一点？

$("#submit").click(function(){
    $(".contactform").hide(1000,function(){
        $(".contactforms").css({display:"block"});
        $("body.custom").css({background: "url('images/strawhat.jpg') repeat;"});
    });
  });

$("#send").click(function(){
    $(".contactforms").hide(1000)
        }); 

更新 我按照第一响应者的建议尝试了这个（写出路径），但没有奏效。

$("#submit").click(function(){
    $(".contactform").hide(1000,function(){
        $(".contactforms").css({display:"block"});
        $("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"});

    });
  });

$("#send").click(function(){
    $(".contactforms").hide(1000)
        }); 

Answer 1

问题出在图片路径上。

在原始 CSS 文件中，指定的路径是相对于该 CSS 文件的。所以 CSS 文件位于 www.example.com/wp-content/themes/thesis_18/custom/，然后指定 'images/subway.jpg' 作为图像 URL 将从 www.example.com/wp-content/themes/thesis_18/custom/images/subway.jpg 加载它。

但是，当您使用 JQuery 更改样式时，您的新样式并未设置在 CSS 文件中，因此其 URL 与该样式表无关。

我想您需要设置相对于主页的背景图像 URL，因为在运行时没有其他上下文可以与之相关。我建议最好的方法是使用来自域根目录的完全限定路径，以反斜杠开头，如下所示：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"});

这将迫使它获得正确的图像。

希望这有助于解释事情。

[编辑] 关于 OP 的评论，说他仍然无法让它工作：

假设您的所有路径都正确，这应该有效。如果没有实际看到无效的示例，我无法证明或解释为什么它不起作用，但我可以就如何追查问题的原因给你一些建议。

该建议是使用 Firebug。 （或其他浏览器附带的任何其他开发工具，但 Firebug 仍然是我的最爱）。

Firebug 是一个基于浏览器的调试工具，它有几个功能可以用来追踪问题。

首先，它有一个“网络”选项卡，可让您查看何时发出 HTTP 请求以及结果如何。如果您在脚本运行时打开它，您应该会看到正在为新图像发出的请求。

如果您看到发出的请求，那么您可以检查它是否成功，即不是 404 错误或类似的错误。在我看来，这似乎是最有可能出现的问题。如果它确实引发了错误，您可以查看错误类型和调用的 URL - 如果这是错误的，它应该为您提供有关如何修复它的重要线索。

如果您没有看到请求发生，那么您可以使用 Firebug 的 CSS 选项卡来检查元素的样式表是否已实际更新。同样，这应该为您提供一些很好的途径来调查任何一种方式。

接下来，Firebug 的 JS 选项卡包含一个完整的 Javascript 调试器，它允许您在代码中放置断点并逐行执行。

如果一切都失败了，请发布一个链接到您的页面版本不起作用，我会看看我是否可以从那里解决。

[编辑] 终于找到了：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"});

在上面的行中，问题是在样式表字符串中repeat 后面不需要分号。应该是：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat"});

呵呵。很容易错过。

我最终通过将上面的代码行粘贴到 Firebug 的控制台中找到了这一点，并尝试了不同的方法直到它起作用。 :-)