Question

我有许多不同的目录，名为SOMECITY-STATE。

这些目录中的每一个都有一个index.html，只有一个区别，每个目录中的标题图像都不同。

现在我有一个单独的标题图像文件夹，其中图像的名称与SOMECITY-STATE.JPG

完全相同

我想要做的是，将一些代码放在html文件中，使其自动读取目录名称，例如NEW-YORK-NY并使页面显示../banners/new-york-ny.jpg，因为它是标题图片。

<div class="header-image"> <a href="#"><img src="banners/new-york-ny.jpg"></a> </div>

mydomain.com/directory1应显示图片../banners/directory1.jpg，而mydomain.com/directory2应显示图片../banners/directory2.jpg

这可能吗？

Answer 1

确实如此。

在每个</body>文件中的结束index.html标记之前，请包含以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  var loc = window.location.pathname;
  var dir = loc.substring(0, loc.lastIndexOf('/'));
  $('.header-image img').attr('src', '../banners/' + dir + '.jpg');
</script>

发生了什么事？

第一行将jQuery库添加到您的网页，这使您尝试做的更容易。
接下来，我在<script>标记内添加了一些代码，因此浏览器知道它将是Javascript。
<script>内的第一行抓取了index.html文件所在的文件夹，但它现在看起来像是“/ new-york-ny /”。
下一行是“/ new-york-ny /”并取消最后一个斜线，所以它只是“/ new-york-ny”。
最后一行代码选择带有div类的header-image内的图片，并将其src属性设置为“/ new-york-ny”，同时添加“ ../banners“和”.jpg“在同一时间，使它成为”../banners/new-york-ny.jpg“，希望这是你想要的。

（感谢Ryan Kinal this question部分代码）

我希望它有所帮助！

使HTML将图像名称更改为目录名称

1 个答案: