Javascript 如何使用jquery动态更改wordpress网站中div的背景？

我有一个用wordpress制作的网站。该站点的每个页面都有一个动态标题，其中div的背景每六秒会随着淡入效果而改变

我制作的代码在主页上运行得很好，但在其他页面上有错误

我获取网站url是为了包含两个字符串：网站url和图像名称。因此，使用jquery，每六秒钟更改一次背景图像

问题是内部页面中的url在所有路径中都被占用。例如：

在主页中，url工作得非常好，给了我这样的结果：“localhost/sitepage”+“wp content/uploads/2019/05/slider_1.1.png”=“localhost/sitepage/wp content/uploads/2019/05/slider_1.1.png”

在剩下的页面中，我看到了下一个结果：“localhost/sitepage/about/localhost/sitepage/wp content/uploads/2019/05/slider_1.1.png”

作为“localhost/sitepage/about/”当前页面的concat，结果是我想要localhost/sitepage/wp content/uploads/2019/05/slider_1.1.png

这是我的代码：

var pageURL = jQuery(location).attr("href");

var img = pageURL+"wp-content/uploads/2019/05/slider_1.1.png";
var img2 = pageURL+"wp-content/uploads/2019/05/slider_1.1.png"; 

var interval = setInterval(function() { 

if(img == img2){


img=pageURL+"wp-content/uploads/2019/05/slider_1.png";

}else{

img=pageURL+"wp-content/uploads/2019/05/slider_1.1.png";

}

console.log(img);
jQuery('#headerhome').fadeTo('slow', 0.3, function()
{
   jQuery(this).css('background-image', 'url(' + img + ')');
}).delay(2500).fadeTo('slow', 1);   

当函数console.log打印img变量中的值时，会完美地显示我想要的url：

localhost/sitepage/wp content/uploads/2019/05/slider_1.1.png

但在浏览器控制台中出现以下错误

错误404获取localhost/sitepage/about/localhost/sitepage/wp content/uploads/2019/05/slider_1.1.png

---

我能做什么？

将您的页面URL更改为以下内容：

var pageURL = jQuery(location).attr("href");

到

---

当前，您的pageURL显示整个url，其中包括“关于”永久链接。由于Wordpress图像文件位于域的“wp content”文件夹之外，因此您需要的是一个没有永久链接的静态域名（例如“about”）

我假设您希望pageURL在本地主机上测试时显示“localhost/sitepage”，在生产站点上测试时显示“www.example.com”

如果是，试试这个

var url = window.location.href; 
var hostname = (new URL(url)).hostname; //returns either 'localhost' or 'www.example.com';
var pageURL = (hostname === 'localhost')? 'localhost/sitepage':'www.example.com';

...

---

您可以使用http://

'URL（http://'+img+'）启动URL

var url = window.location.href; 
var hostname = (new URL(url)).hostname; //returns either 'localhost' or 'www.example.com';
var pageURL = (hostname === 'localhost')? 'localhost/sitepage':'www.example.com';

...