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

Question

我有一个用 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/”当前页面与我想要的结果 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

我能做什么？

Answer 1

目前您的 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';

...