Question

我正在尝试为我正在设置的新网站自动化一个可能很长的过程。基本上，我想要做的是在页面上发布缩略图，但有一个javascript根据css类的内容确定要发布的图像。

1）我所拥有的所有图像都会预先加载到名为＆＃34; logos＆＃34;

的目录中的服务器上

2）css类将成为每个页面的一部分（在这个例子中，类名是＆＃34;标题＆＃34;）

3）图像名称和css类内容都是相同的 - 例如，如果某人登陆客户页面上的css类＆＃34; title＆＃34;将包含公司名称：＆＃34;公司X＆＃34; - 会有一个相应的公司徽标，名称为＆＃34;公司X.jpg＆＃34;

我试图通过在页面上编码图像占位符来执行此操作，然后调用javascript来更改＆＃34; img src＆＃34;该占位符基于它的id名称＆＃34; compLogo＆＃34;。我正在使用下面的javascript：

var link = getElementsByClassName("title");
images = "<img src=/logos/'>"
document.getElementById("compLogo").innerHTML = 'images' + '[link]' + '.jpg';

但是，脚本未正确写入图像源，因此图像在我的页面上显示为已损坏。我显然对JS很新，但任何帮助都会非常感激。

Answer 1

对于任何需要帮助的人，我都能找到解决方案。

var link = document.getElementsByClassName("title")[0].textContent;
var imageurl = "<img src=\"http://testsite.com/logos/";
var suffix = ".jpg\">"
document.getElementById("compLogo").innerHTML = imageurl + link + suffix;

这完美无缺。如果你在你的html中创建一个名为“compLogo”的div容器并放置一个指向这个javascript的链接，它将“抓取”与你的类名的文本内容同名的图像文件（在这个例子中为“title”）并相应地放置它。使用css以任何你想要的方式设置你的“compLogo”ID。

我的初始代码无法正常工作的原因是由于未确定我尝试在节点中定位的内容类型。通过添加“[0] .textContent”修复了那个问题。我也错误地省略了“getElementsByClassName”之前的“文档”。

或者，如果您想将网址的最后一部分作为图片的“源”名称（这是我最终使用的名称），请使用以下代码：

var pathArray = window.location.pathname.split( '/' );
var secondLevelLocation = pathArray[2];
var imageurl = "<img src=\"http://testsite.com/logos/";
var suffix = ".jpg\">"
document.getElementById("compLogo").innerHTML = imageurl + secondLevelLocation + suffix;

（感谢css-tricks.com的window.location代码）

这样，如果您在wordpress网站中使用％post-name％永久链接，则上面的代码将获取帖子/页面网址的名称。如果您需要将图片与帖子网址相关联，只需将图片命名为：'your-post-url-name.jpg'，您就可以了。

我老实说，只是在寻找PHP错误的地方，你根本没有帮助。我明确表示我是JS的新手...下一次，如果你没有合法的东西，不要浪费任何人的时间。

动态更改基于css类内容的图像

1 个答案: