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'，因为图片网址会从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的控制台中，并尝试了不同的东西，直到它工作为止。： - ）

- 不像这个小提琴那样简单明了吗？

1 个答案: