Question

我有一个正在处理模板的网站。

在模板中有一个主要图像＆amp;我想在某些页面上替换主图像，而不是在完整的网站上。我正在寻找的是将主图像更改为我需要的ajax页面上的新图像。

当我看到该模板的CSS时，我发现以下代码显示图像

赛拓朴-BG {

  background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
   }

在php页面上我找到了带有图像的下一行。

       <div class="top-bg">

我需要ajax / jquery代码才能更改图像。

我的基本逻辑是，我将从MYSQL数据库获取该图像URL并分配给一个变量，然后我将更改来自数据库的图像，实际上它的一页显示产品，我想显示产品的主图像参考加载产品，我希望你能理解我最终需要的东西......

由于

感谢每一个人如何回复，我找到了解决方案

（文档）$。就绪（功能（）{ $（'＃imageContainer'）。css（“background-image”，“url（images / cube.jpg）”）;
} ）;

这对我来说确实是我需要的，无论如何，谢谢，也感谢投票... :(（

Answer 1

虽然我认为Ajax是您的问题的错误解决方案，但我会为您提供以下内容（至少可以满足您的问题）：

$('#changeImage').click(
    function(){
        $('#imageContainer').load('http://path.to.php/file.php #imageID');
        return false;
    }
);

单击id="changeImage"的元素会将位于id="imageID" 网址的php文件中http://path.to.php/file.php的内容加载到元素中（大概是{{} 1 {}}，但无论如何）div。

那就是说，我建议遵循@Nick Craver和@Aaron Digulla的建议并使用CSS。

如果你id="imageContainer" view source在我的网站上有一个jQuery load的工作演示（发布以回应不同的SO问题）{。{3}}。

回应OP的评论。

要在页面加载时自动执行此操作：

$(document).ready(
 function(){
   $('#imageContainer').load('http://path.to.php/file.php #imageID');
 }
);

Answer 2

您根本不需要任何JavaScript，只需在想要更改映像的网页上包含另一个样式表（或<style>块）。就在这里：

.top-bg { background:url(../images/other-image.jpg); }

或<style>版本：

<style type="text/css">
  .top-bg { background:url(../images/other-image.jpg); }
</style>

只要在模板样式表之后声明，background属性将覆盖模板一，并且上的自定义图像只是那些页面。

Answer 3

我认为AJAX是错误的做法。当用户与网页交互时，AJAX应该用于加载新数据。

您的问题可以解决得更简单：如果您可以向页面代码添加AJAX调用，为什么不简单地添加新的CSS样式：

.tob-bg {
     background:url(../images/other.jpg) top center no-repeat;
}

或创建第二个模板，并将其用于除主页之外的所有模板。